Question

我刚拿起react-router，我确定我做错了什么，只是无法弄清楚文档和样本中的内容。

我有3个链接指向同一个组件。区别在于URL中传递的2个参数：

 <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>

如果我点击3个图表链接中的一个，我会获得正确的图表，并通过了正确的props。如果我点击另一个图表链接没有任何变化如果我单击其他链接之一（＆＃34;主页＆＃34;或＆＃34;不存在＆＃34;）然后单击图表，则会正确显示。显然，只有参数改变才会发生路由。

我怎样才能让路由每次都发生，或者我是否接近这个错误？有没有更好的方法将参数/道具传递给同一个组件？

Answer 1

您可以简化上述代码，

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

您可以使用

轻松访问图表组件中的此网格/访问道具

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

如果您想更新图表内的内容，例如加载新的数据源组件

使用 componentWillReceiveProps 功能

对于具有不同参数的相同路由，React-router路由不会发生变化

1 个答案: