ReactJS - 链接对带有参数的 URL 不起作用答案

【问题标题】：ReactJS - link to doesn't work for URL with parameterReactJS - 链接对带有参数的 URL 不起作用
【发布时间】：2018-10-24 05:54:09
【问题描述】：

我使用 ReactJS 和 react-router-dom（4.2 版）。我无法使用我的链接：

<Link to={'/site/' + site.id}>
    <h5><Icon name="map-marker"/> {site.title}</h5>
</Link>

当我在主页 (http://localhost:3000) 上时它可以工作，组件被渲染，但是当我在类似的页面上时：http://localhost:3000/site/1，我无法转到 URL http://localhost:3000/site/2。

地址栏中的 URL 发生变化，但没有任何反应。

我用：

...
<Route path="/site/:id" render={(props) => (
    <SitesView id={props.match.params.id} />
)}/>
...

export default connect(mapStateToProps, mapDispatchToProps, undefined, { pure: false })(App);

在我的路由器中。看不懂，是不是因为网址几乎一样？

【问题讨论】：

标签： reactjs

【解决方案1】：

据我了解，对于具有不同 props.id 的所有 /site/ 路由，您有一个组件 <SitesView/>。

当您更改 URL 的参数时，<SitesView/> 组件的 id 和 URL 将被更改，但请注意 <SitesView/> 是在以前的路由上呈现的，此时您正在看到这个渲染的组件对更改一无所知。

那么您需要使用名为 componentWillReceiveProps(nextProp, nextState) 的React LifeCycle Methods 之一来了解<SitesView/> 的 id 何时更改。并且基于新的 id 你可以更新你的组件。

【讨论】：

好的，谢谢你的解释，现在我将只使用<a href="site/2" 重新渲染页面，而且非常简单。有时间我会试试你的方法
好的，但最好尽快找到像componentWillReceiveProps这样的解决方案，因为使用重新渲染进行更新是违反SPA的。
我知道，但我需要很多才能让它发挥作用，但我会使用它。自从您向我解释后，我在 StackOverflow 上找到了其他信息。