使用 react-router-dom 渲染组件时更改 URL？答案

【问题标题】：change Url when component renders with react-router-dom?使用 react-router-dom 渲染组件时更改 URL？
【发布时间】：2018-01-24 06:27:08
【问题描述】：

有没有办法在反应路由器中，每当某些组件呈现 url 时都会相应地更改。

我知道的一种方法是将window.history.pushState('', '', '/componentUrl'); 放在组件的render function 中

除了Route 中的path 属性之外，还有没有更好的方法在route 中完成它，因为path= 'someurl' 意味着每当访问someurl 时someComponent 应该呈现

但反过来说，每当someComponent 呈现的 url 应该更改为 someurl 时，我在 component 内的条件呈现上下文中使用这个 senerio。

【问题讨论】：

你是如何渲染那个组件的
我正在根据状态渲染组件中的不同组件，例如 if state == 'a' render Acomponent if state == 'b' render Bcomponent 通过这种方式组件正在渲染但是网址不变
URL 应该驱动组件的呈现。应用程序状态和组件不应驱动 URL。相反，我会考虑更改 URL 以呈现此组件。
我不建议在渲染组件时更改 URL 考虑在另一个组件的嵌套子组件中渲染此组件的情况，您将更改 URL，现在假设您拥有相同的组件重复使用 3 个不同的点，那么您将从 3 个不同的组件更改 URL，这是不正确的。相反，你应该让 URL 驱动你的组件渲染

【解决方案1】：

使用 react-router 时最重要的一点是：

path 属性定义路由 URL 和 component 属性定义此路由的组件。

我建议阅读this。最佳实践建议，就像 Matt Derrick 在 cmets 中建议的那样，URL 应该驱动组件的呈现。

由于您有基于状态呈现的 Acomponent 和 Bcomponent，因此我建议您有 2 个不同的 URL 来伴随它。所以当状态变为 ==='a' 时你会跳转到 /aURL，当状态变为 ==='b' 时你会跳转到 /bURL。

希望这能回答你的问题。

【讨论】：

dats cool jump to /aUrl mean window.history.pushState('', '', '/aUrl) ??
是或在 appRoutes 中初始化类似 { path: '/aUrl', component: Acomponent }
这就是我所做的，寻找一种解决方案，例如在 router 本身中传递一个回调函数，该函数将在组件呈现时执行，以便此跳转 url 将由 @987654326 处理@本身。我不知道react-router-dom 是否有可能。
在这种情况下，您将需要路由器中的状态之类的东西。也许看看这个。 npmjs.com/package/react-state-router