Navigating Programmatically in React-Router v4

Question

I couldn\'t wait and I jumped into using the latest alpha version of react-router v4. The all-new is great in keeping your U

Answer 1

If you need to navigate outside of a component at a location that you are unable to pass in the history object from a component similar to how you would do with browserHistory in older versions you can do the following.

First create a history module

History.js:

import createBrowserHistory from 'history/createBrowserHistory'

export default createBrowserHistory();

Then when you are declaring the Router make sure to import Router from react-router and not react-router-dom (which is just a wrapper to react-router version but creates history object automatically) and pass in the history module you just created

Root.js (or wherever you do this):

import Router from 'react-router/Router'
import history from './history'

...

class Root extends Component{
  render() {
    return (
      <Router history={history}>
        ...
      </Router>
    );
  }
}

Now your application will use the custom created history you created. You can now import that history module anywhere and just do history.replace and so forth just like you would of done with browserHistory in the past.

SomeModule.js:

import history from './history';

export default ()=>{
  // redirecting to login page using history without having to pass it in 
  // from a component
  history.replace('/login')
}

Of course this is not the recommended way just as using browserHistory in the old versions was not the recommended way since things like server side rendering won't work, but if you don't care about that this can often be the right solution.

An extra benefit doing this is you could augment the history object to things lie parsed query string params like this for example:

import createBrowserHistory from 'history/createBrowserHistory'
import queryString from 'query-string';

const history = createBrowserHistory();

history.location.query = queryString.parse(history.location.search);

history.listen(() => {
  history.location.query = queryString.parse(history.location.search);
});

export default history;

Answer 2

If you need to access history outside of components (for example in redux actions) react-router has published their original solution here.

Basically you have to create your own history object:

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

And pass it to your router:

import { Router } from 'react-router-dom';

ReactDOM.render((
  <Router history={history}> // <<-- the history object
    <App/>
  </Router>
), document.getElementById('root'))

Note: you have to use plain Router instead of BrowserRouter or HashRouter here!

If you export the history now, you can work with it anywhere:

import history from './history';

history.push('/home');

Answer 3

It is really difficult with react-router. None of the options are straight-forward. this.props.history gave me undefined. But

window.location='/mypath/';

worked for me in version 5.0.0. Don't know whether it is the right method.

Answer 4

use withRouter:

import React, { PropTypes } from 'react'
import { withRouter } from 'react-router'

// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

  render() {
    const { match, location, history } = this.props

    return (
      <div>You are now at {location.pathname}</div>
    )
  }
}

// Create a new component that is "connected" (to borrow redux
// terminology) to the router.
const ShowTheLocationWithRouter = withRouter(ShowTheLocation)

Answer 5

I found using state, a ternary operator and <Redirect> worked best. I think this is also the prefered way since it is closest to the way v4 is set up.

In the constructor()

this.state = {
    redirectTo: null
} 
this.clickhandler = this.clickhandler.bind(this);

In the render()

render(){
    return (
        <div>
        { this.state.redirectTo ?
            <Redirect to={{ pathname: this.state.redirectTo }} /> : 
            (
             <div>
               ..
             <button onClick={ this.clickhandler } />
              ..
             </div>
             )
         }

In the clickhandler()

 this.setState({ redirectTo: '/path/some/where' });

Hope it helps. Let me know.

Answer 6

react-router v4 beta is released and the API changed a little bit. Instead of this.context.router.transitionTo(e.target.href) Do, this.context.router.push(e.target.href) if you are using latest version.

Link to new doc: https://reacttraining.com/react-router/#context.router