react-router：如何在不导致导航/重新加载的情况下更新 url？

Question

使用 React 路由器，我已经更新了 url：

this.props.history.push({
            pathname: `/product/${this.props.product.id}`,
        });

然而，这会导致重新渲染/导航更改。 有没有办法在不这样做的情况下更新 url？

我的用例是我有一个产品列表，当我单击一个产品时，我会显示一个模态窗口，并希望将 url 更新为 example.com/product/1 之类的内容，以便可以共享该链接。

Answer 1

无法使用 React Router 找到解决方案，但能够使用浏览器的历史界面通过调用：

window.history.replaceState(null, "New Page Title", "/pathname/goes/here")

您可以在此处了解有关.replaceState的更多信息。

React Router 的history.replace并不总是有效

React Router 的history.replace方法可能会也可能不会触发重新渲染，具体取决于您的应用程序的路由设置（例如，您有一个包罗万象的/*路由）。 它不会根据定义阻止渲染。

Answer 2

替换将覆盖 URL

this.props.history.replace({ pathname: `/product/${this.props.product.id}`})

Answer 3

我正在使用一种很好的方式来欺骗用户，即 URL 不会改变。

为此，您只需要像这样设置您的路线。

const Home = '/';
const About = '/ ';
const Contact = '/  ';

注意空格。 所有字符都将计入引号内，因此它应该可以工作。

Routes.tsx

<Route exact path={Home} component={Home} />
<Route exact path={About} component={About} />
<Route exact path={Contact} component={Contact} />

在您的About.tsx和Contact.tsx中：

  useEffect(() => {
    window.history.replaceState(null, '', Home);
  }, []);

用户导航到About或Contact页面后，将调用挂钩并运行回调函数内的代码。 它将在组件渲染后删除空格。

这应该是伪装隐藏 URL 的干净技巧😂

Answer 4

旧帖子，但我想我不妨回答一下。 我认为您正在寻找的是useHistory()钩子。

用法：

import { useHistory } from "react-router-dom";

const history = useHistory();
history.push("/my/url");

Answer 5

当您在反应组件中时， props具有history ，您可以使用它。

对于那些即使不在反应组件内部也正在寻找一种导航方式的人，即您无法获得props.history ，这是一种方法：

在渲染路由器的组件中：

// outside the component
export const browserRouterRef = React.createRef();

// on render
<BrowserRouter ref={browserRouterRef}>

然后，您可以在任何地方导入browserRouterRef并使用browserRouterRef.current.history更改路由，即使您不在反应组件中。