更改 url 参数时，React 路由器不会重新加载组件

Question

I know that it's not a default behaviour / feature of react-router to help us reload easily the current component but I really need this in my application.

My application deals with products. I have a product list that I can load, and when I click on an item, it displays the concerned product details.

On that page, I have related product links that load the same component, but with another product details, located at

<Route path="/products/:id/details" component={ProductDetail} />

I m fetching data in my componentWillMount, and it seems that if I only change the URL, a new component is NOT mounted, and so, I m always having my old data displayed, without fetching anything.

As a beginner using React, I'm looking for some help, or some tricks to reload the component concerned by that page. I mean being able to reload the ProductDetail with the good product.

I tried to look around with componentWillUpdate (a method in which I can see that the router URI changes :D) but I can't setState inside of it to make my component reload (it doesn't seem to be a good practice at all)

Any idea how can I make this work ?

EDIT : According to the first answer, I have to use onEnter. I m now stuck with the way of passing state/props to the concerned component :

const onEnterMethod = () => {
    return fetch(URL)
        .then(res => res.json())
        .then(cmp => {
            if (cmp.length === 1) {
             // How to pass state / props to the next component ?
            }
        });
};

Answer 1

The way to handle it depends if you are using flux, redux or however you want to manage your actions. On top of it I would try to make use of onChange property of Route component (check React router docs ):

    <Route path="/products/:id/details" component={ProductDetail} onChange={someMethod} />

And then in the someMethod create the action if you are using redux or however is done in flux. The redux would be:

    <Route path="/products/:id/details" component={ProductDetail} onEnter={onEnterHandler(store)} />

And the onEnterHandler with the redux store:

    function onEnterHandler(store) {
      return (nextState, replace) => {
        store.dispatch({
          type: "CHANGEPRODUCT",
          payload: nextState.params.id
        })
      };
    }

And then in your ProductDetail component you would print the new information (It would require a bit more of learning in redux and redux-sagas libraries to complete that part).

Keep in mind that React is just the view part, trying to solve all those problems using only react is not only not recommended but also would mess up your code.