React router not reloading Component when changing url params

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 ?
            }
        });
};

OriolBG · Accepted Answer · 2016-10-14 09:26:23Z

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.

edited Oct 14, 2016 at 9:26

answered Oct 14, 2016 at 7:22

OriolBG

2,0472 gold badges18 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mfrachet Over a year ago

Thanks for this, I think I m looking for onEnter, I'll edit my question ;)

OriolBG Over a year ago

That depends on what you are using, if redux or flux. I don't know about flux but I will post the redux example.

Collectives™ on Stack Overflow

React router not reloading Component when changing url params

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related