ReactJS-链接到带有参数的URL不起作用

Question

I use ReactJS and react-router-dom (version 4.2). I can't have my links working with :

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

It works when I am on home page ( http://localhost:3000 ), the component is rendered, but when I am on a page like : http://localhost:3000/site/1 , I can't go to URL http://localhost:3000/site/2 .

The URL changes in address bar, but nothing happens.

I use :

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

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

In my Router. I can't get it, is it because the URL are almost the same ?

Answer 1

As I understood , you have one component <SitesView/> for all of the /site/ routes with different props.id 's.

When you change the parameter of URL, the id of <SitesView/> component and the URL will be changed but be noticed the <SitesView/> is rendered on previous route and at the moment you are seeing this rendered component which has no knowledge aboute the changes.

Then you need to use one of the React LifeCycle Methods named componentWillReceiveProps(nextProp, nextState) to get to know when the id of <SitesView/> changed . and based on new id you can update your component.