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

Question

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

现在我需要将 object 传递给将要呈现的组件。

如何将 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 需要在 props 被解析到 componentn 时触发 onClick。

Answer 1

可以从this.props.route访问传递的道具：

this.props.route.yourCustomProp

您可以使用 this.props.history 使用正常的历史模块方法以编程方式转到新路线，例如 push and replace:

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

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

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

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

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

How do I trigger a route manually with React router?

javascript

reactjs

react-router