How to Route without reloading the whole page?

Question

I am Using react-route, and i am facing some trouble with routing.

The whole page is reloading , causing all the data that i have already fetched and stored in the reducer to load every time.

Here is my Route file :

var CustomRoute = React.createClass({
    render:function(){
        return <Router history={browserHistory}>
            <Route path="/" component={Layout}>
                <IndexRedirect to="/landing" />
                <Route path="landing" component={Landing} />
                <Route path="login" component={Login} />
                <Route path="form" component={Form} />
                <Route path="*" component={NoMatch} />
            </Route>
        </Router>
    },
});

Before routing i already store data by calling action in my main.jsx

/** @jsx React.DOM */
'use strict'
var ReactDOM = require('react-dom')
var React = require('react')
var Index = require('./components/index')
var createStore = require("redux").createStore
var applyMiddleware = require("redux").applyMiddleware
var Provider = require("react-redux").Provider
var thunkMiddleware = require("redux-thunk").default
var reducer = require("./reducers")
var injectTapEventPlugin =require('react-tap-event-plugin');
injectTapEventPlugin()
var createStoreWithMiddleware=applyMiddleware(thunkMiddleware)(createStore);
var store=createStoreWithMiddleware(reducer);
store.dispatch(actions.load_contacts()) //////////// <<<<<< this is what i call to store data already

ReactDOM.render( <Provider store={store}><Index/></Provider> , document.getElementById('content'))

The issue is i have to route to another page if sucess login :

this.props.dispatch(actions.login(this.state.login,this.state.password,(err)=>{
    this.setState({err:err})
    if (!err){
        window.location = "/form"
    }
}));  

The window.location does the trick but it reloads everything which is very inefficient. In manual route i use <Link\> that routes without reloading, however for automated i am not sure how to do it.

Any Suggestion will be much appreciated.

Answer 1

for the most recent release (v2.0.0-rc5), the recommended navigation method is by directly pushing onto the history singleton.

DEMO

Relevant code

import { browserHistory } from './react-router'
browserHistory.push('/some/path')

If using the newer react-router API, you need to make use of the history from this.props when inside of components so:

static propTypes = {
    history: React.PropTypes.object
}

this.props.history.push('/some/path');

If using react-router-redux, it offers a push function you can dispatch like so:

import { push } from 'react-router-redux';
this.props.dispatch(push('/some/path'));

In v2.4.0 and above, use a higher order component to get the router as a prop of your component.

import { withRouter } from 'react-router'

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

// Export the decorated class
var DecoratedExample = withRouter(Example);

// PropTypes

Example.propTypes = {
  router: React.PropTypes.shape({
    push: React.PropTypes.func.isRequired
  }).isRequired
};

Visit this link for more information: http://kechengpuzi.com/q/s31079081

Answer 2

React >= 16.8 and react-router v4

No one mentioned a solution for an app using hooks. Since React 16.8 (and react-router 4, not sure what is the minimal version, I use the latest), you can use a hook called useHistory.

import { useHistory } from 'react-router';

const MyHookComponent: React.FC = () => {
    
    const routerHistory = useHistory();
    routerHistory.push('/page-where-to-redirect');

    return <></>;
}

export default MyHookComponent;

More info here https://reactrouter.com/web/api/Hooks/.

Update: react-router v6

There was a new hook introduced in react-router 6:

import { useNavigate } from "react-router-dom";

const navigate = useNavigate();

navigate('/page-where-to-redirect');

Documentation can be be found here https://reactrouterdotcom.fly.dev/docs/en/v6/api#usenavigate