Ad

How Do I Trigger A Route Manually With React Router?

- 1 answer

As the title says, I have a table. If I click on a td, I'd like to forward the user to a specific url.

Now I need to pass an object to the component that will be rendered.

  • How do I pass props to a component dynamically?
  • How can I manually trigger a route?

I'm on React 0.14.6 and react-router 1.0.3.

My config is pretty straight:

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

customerOverview needs to be triggered onClick with the props being parsed to the componentn.

Ad

Answer

Passed props can be accessed from this.props.route:

this.props.route.yourCustomProp

You can programatically go to a new route with this.props.history using the normal History module methods like push and replace:

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

If you need to access the history prop deeper in your component you can use the withRouter HOC.

For DOM links use Link as per docs.

Note this answer has been updated for react-router v4. Old versions of react-router use an older history module which has pushState and replaceState on it.

Ad
source: stackoverflow.com
Ad