Question

我已经使用React Router完成了网址更新：

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

但是，这会导致重新渲染/导航更改。有没有一种方法可以不执行此操作来更新网址？

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

Answer 1

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

来完成此任务

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

您可以了解有关.replaceState here的更多信息。

反应路由器的history.replace不能始终正常工作

反应路由器的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 页面后，将调用钩子并运行回调函数内的代码。它将在组件渲染后移除空格。

这应该是伪装隐藏网址的绝招?

Answer 4

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

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

在渲染路由器的组件中：

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

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

然后你可以在任何地方导入 browserRouterRef 并使用 browserRouterRef.current.history 来改变路由，即使你不在 React 组件中。