What is actually the right way to transition / redirect with React Router?

Question

I am learning React Router and I cannot figure out what redirecting is currently recommended. I read a lot of StackOverflow articles and posts, but there are a lot of variety that I'm not sure about which one can be implemented for the current version of React Router.

What I'm trying to do is redirect after an AJAX call using axios.

axios.post('/some-route') .then(/*I want to redirect here*/) 

Note: this code is inside a function inside React.Component, called when the form is submitted.

How to do it?

Please tell me what data you need.

Answer 1

You can use browserHistory :

  import { browserHistory } from "react-router"; browserHistory.push({ pathname: '/your/path' }); 

Answer 2

This answer is for react-router-v4 .

If you want redirect from the same component (not from some action ), and this component displayed by some route , then you can use the history object passed to props .

 componentDidMount(){ if(this.state.some_param){ this.props.history.push("/some_location") } } 

The best way is to create your own history object. You can use this history object in any action .

 //history.js import createHistory from 'history/createBrowserHistory' export default createHistory() 

then you can use this story in your router,

 import history from "./history" <Router history = {history}> //other code </Router> 

Now you can use this story object anywhere to redirect,

 axios.post('/some-route') .then(res=>{ history.push("/some_location") }) 

 const {Component} = React const {render} = ReactDOM const {Router, Link, Route, Switch, withRouter, Redirect} = ReactRouterDOM const createHistory = History.createHashHistory const myhistory = createHistory() class App extends Component{ redirectToHome(){ myhistory.push("/home") } redirectToAbout(){ myhistory.push("/about") } render(){ return( <div> <Route path = "/home" component = {Home} /> <Route path = "/about" component = {About} /> <button onClick = {this.redirectToHome}>Redirect to home</button> <button onClick = {this.redirectToAbout}>Redirect to about</button> </div> ) } } const Home = ()=>{ return( <div> Home </div> ) } const About = ()=>{ return( <div>About</div> ) } render(<Router history = {myhistory}><App/></Router>, document.getElementById('app')) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script> <script src="https://unpkg.com/ react-router-dom@4.1.1 /umd/react-router-dom.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/history/4.6.3/history.min.js"></script> <div id="app"></div> 

Answer 3

Starting with React Router v4, browserHistory no longer exported from react-router .

You have two options.

1) If your component is displayed through the route (this is component support for the <Route> component, then you automatically receive several objects as a property:

• History
• match
• a place

Then you can use this.props.history.push("/some_location") in the component context

2) If your component is not associated with a specific route, you can get the same withRouter high-order withRouter component that is part of react-router

 import { withRouter } from "react-router-dom"; const Component = ( { history, location, match } ) => ( // your component code ); export default withRouter(Component);