Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React router is not reloading page when url matches the same route

I have following route. When I'm at /createtest page and doing history.push(/createtest/some-test-id) as it matches the same route component, it is not reloaded. Is there any smart solution? Or I need to check match params and implement logic to reload?

(react 16, router v4)

<Route path="/createtest/:testid?/:type?/:step?/:tab?" render={(props) => <CreateTest user={user} {...props}/>}/>
like image 922
sapy Avatar asked Mar 06 '23 15:03

sapy


1 Answers

You could give the URL parameters as key to the component so that an entirely new component will be created when a URL parameter changes.

<Route
  path="/createtest/:testid?/:type?/:step?/:tab?"
  render={props => {
    const {
      match: {
        params: { testid, type, step, tab }
      }
    } = props;
    return (
      <CreateTest
        key={`testid=${testid}&type=${type}&step=${step}&tab=${tab}`}
        user={user}
        {...props}
      />
    );
  }}
/>;
like image 107
Tholle Avatar answered Apr 27 '23 19:04

Tholle