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

Question

正如标题所说，我有一张 table 。如果我点击一个 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 需要在 props 被解析到 componentn 时触发 onClick。

Answer 1

可以从 this.props.route 访问传递的 props:

this.props.route.yourCustomProp

您可以使用普通的历史模块方法(如 push)通过 this.props.history 以编程方式转到新路线。和 replace :

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

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

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

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