对于具有不同参数的相同路由，React-router路由不会更改

Question

I just picked up react-router , and I'm sure I'm doing something wrong, just couldn't figure out what from the documentation and samples.

I have 3 links pointing to the same component. The difference is the 2 parameters passed in the URL:

 <Router>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/chart/0/0">Chart</Link></li>
        <li><Link to="/chart/1/0">Chart with grid</Link></li>
        <li><Link to="/chart/1/1">Chart with grid and axis</Link></li>
        <li><Link to="/doesnotexist">This link does exist</Link></li>
      </ul>

      <hr/>

      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/chart/:grid/:axis" render={
          props => <Chart grid={props.match.params.grid === '1'} axis={props.match.params.axis === '1'} />
        }/>
        <Route component={NoMatch}/>
      </Switch>
    </div>
  </Router>

If I click one of the 3 chart links, I get the right chart rendered, with the right props passed. If I click another chart link nothing changes. If I click one of the other links ("home" or "does not exist") and then click a chart, it displays properly. Clearly routing does not happen if only the parameters change.

How can I get routing to happen every time, or am I approaching this wrong? Is there a better way to pass parameters/props to the same component?

Answer 1

You can simplify above code,

<Route path="/chart/:grid/:axis" component={Chart} />

You can easily access this grid / access props inside Chart component using

const { axis, grid } = this.props.params

If you want to update something inside the Chart eg load new data source component

use componentWillReceiveProps function