如何使用 React 路由器手动触发路由？

Question

正如标题所说，我有一张桌子。如果我点击一个 td，我想将用户转发到一个特定的 url。

现在我需要将一个对象传递给将要渲染的组件。

• 如何将 props 动态传递给组件？
• 如何手动触发路由？

我正在使用 React 0.14.6 和 react-router 1.0.3。

我的配置很简单：

<Provider store={store}>
    <Router>
      <Route path='/' component={App}>
        <IndexRoute component={SearchCustomer}/>
        <Route path='customerOverview/:props' component={CustomerOverview}/>
      </Route>
    </Router>
  </Provider>

customerOverview 需要在 onClick 被解析到组件时触发。

Answer 1

通过的道具可以从this.props.route访问：

this.props.route.yourCustomProp

您可以使用push 和replace 等常规历史模块方法以编程方式使用this.props.history 转到新路线：

this.props.history.push('/login')

如果您需要更深入地访问组件中的 history 属性，您可以使用 withRouter HOC。

对于 DOM 链接，请根据文档使用 Link。

请注意，此答案已针对 react-router v4 进行了更新。旧版本的 react-router 使用旧的历史模块，上面有 pushState and replaceState。