Programmatically navigate using react router

Question

With react-router I can use the Link element to create links which are natively handled by react router.

I see internally it calls t

Answer 1

For this one, who does not control the server side and because of this is using hash router v2:

Place your history into separate file (e.g. app_history.js ES6):

import { useRouterHistory } from 'react-router'
import { createHashHistory } from 'history'
const appHistory = useRouterHistory(createHashHistory)({ queryKey: false });

export default appHistory;

And use it everywhere!

Your entry point for react-router (app.js ES6):

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, Redirect } from 'react-router'
import appHistory from './app_history'
...
const render((
  <Router history={appHistory}>
  ...
  </Router>
), document.querySelector('[data-role="app"]'));

Your navigation inside any component (ES6):

import appHistory from '../app_history'
...
ajaxLogin('/login', (err, data) => {
  if (err) {
    console.error(err); // login failed
  } else {
    // logged in
    appHistory.replace('/dashboard'); // or .push() if you don't need .replace()
  }
})

Answer 2

I tried at least 10 ways of doing this before something worked right!

@Felipe Skinner's withRouter answer was a bit overwhelming to me, and I wasn't sure I wanted to make new "ExportedWithRouter" class names.

Here's the simplest and cleanest way to do it, circa current React-Router 3.0.0 and ES6:

React-Router 3.x.x with ES6:

import { withRouter } from 'react-router';

class Example extends React.Component {
   // use `this.props.router.push('/some/path')` here
};

// Export the decorated class
export default withRouter(Example);

or, if it's not your default class, export like:

withRouter(Example);
export { Example };

Note that in 3.x.x, the <Link> component itself is using router.push, so you can pass it anything you would pass the <Link to= tag, like:

   this.props.router.push({pathname: '/some/path', query: {key1: 'val1', key2: 'val2'})'

Answer 3

In React-Router v4 and ES6

You can use withRouter and this.props.history.push.

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

class Home extends Component {

    componentDidMount() {
        this.props.history.push('/redirect-to');
    }
}

export default withRouter(Home);

Answer 4

For ES6 + React components, the following solution worked for me.

I followed Felippe skinner, but added an end to end solution to help beginners like me.

Below are the versions I used:

"react-router": "^2.7.0"

"react": "^15.3.1"

Below is my react component where I used programmatic navigation using react-router:

import React from 'react';

class loginComp extends React.Component {
   constructor( context) {
    super(context);
    this.state = {
      uname: '',
      pwd: ''
    };
  }

  redirectToMainPage(){
        this.context.router.replace('/home');
  }

  render(){
    return <div>
           // skipping html code 
             <button onClick={this.redirectToMainPage.bind(this)}>Redirect</button>
    </div>;
  }
};

 loginComp.contextTypes = {
    router: React.PropTypes.object.isRequired
 }

 module.exports = loginComp;

Below is the configuration for my router:

 import { Router, Route, IndexRedirect, browserHistory } from 'react-router'

 render(<Router history={browserHistory}>
          <Route path='/' component={ParentComp}>
            <IndexRedirect to = "/login"/>
            <Route path='/login' component={LoginComp}/>
            <Route path='/home' component={HomeComp}/>
            <Route path='/repair' component={RepairJobComp} />
            <Route path='/service' component={ServiceJobComp} />
          </Route>
        </Router>, document.getElementById('root'));

Answer 5

If you are using hash or browser history then you can do

hashHistory.push('/login');
browserHistory.push('/login');

Answer 6

React-Router 4.x Answer :

On my end, I like to have a single history object that I can carry even outside components. What I like to do is to have a single history.js file that I import on demand, and just manipulate it.

You just have to change BrowserRouter to Router, and specify the history prop. This doesn't change anything for you except that you have your own history object that you can manipulate as you want.

You need to install history, the library used by react-router.

Example usage, ES6 notation :

history.js

import createBrowserHistory from 'history/createBrowserHistory'
export default createBrowserHistory()

BasicComponent.js

import React, { Component } from 'react';
import history from './history';

class BasicComponent extends Component {

    goToIndex(e){
        e.preventDefault();
        history.push('/');
    }

    render(){
        return <a href="#" onClick={this.goToIndex}>Previous</a>;
    }
}

EDIT April 16th, 2018 :

If you have to navigate from a component that is actually rendered from a Route component, you can also access history from props, like that :

BasicComponent.js

import React, { Component } from 'react';

class BasicComponent extends Component {

    navigate(e){
        e.preventDefault();
        this.props.history.push('/url');
    }

    render(){
        return <a href="#" onClick={this.navigate}>Previous</a>;
    }
}