Question

我使用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这样的网页上时，我无法访问网址{{ 3}}

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

我用：

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

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

在我的路由器中。我无法得到它，是因为URL几乎相同吗？

Answer 1

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

当您更改网址的参数时，<SitesView/>组件的ID和网址将会被更改，但会被注意 <SitesView/>在之前的路线上呈现，并且那一刻你会看到这个渲染的组件，它不知道变化。

然后，您需要使用名为 React LifeCycle Methods 的componentWillReceiveProps(nextProp, nextState)之一，以便在<SitesView/>的ID更改时了解 。并根据新ID，您可以更新您的组件。

ReactJS - 链接到没有用于带参数的URL

1 个答案: