I am using react-router-2. I want to redirect to a page programmatically after successful login or after some action performed.

My route file is like this(routes.js)

   <Route path="/" ponent={App}>
       <IndexRoute ponent={Home}/>
       <Route path="/login" ponent={Login} onEnter={redirectToDashboard}/>
       <Route path="dashboard" ponent={Dashboard} onEnter={redirectToLogin}/>
   </Route>

onEnter hooks

function redirectToLogin(nextState, replace) {
    // Perform some authentication check
    if (!loggedIn) {
        replace({
            pathname: '/login',
            state: { nextPathname: nextState.location.pathname }
        });
    }
}

function redirectToDashboard(nextState, replace) {
  // Perform some check if already authenticated 
    if (loggedIn) {
        replace('/dashboard')
    }
}

I want to redirect to Dashboard ponent from Login ponent after successful login.

I am using react-router-2. I want to redirect to a page programmatically after successful login or after some action performed.

My route file is like this(routes.js)

   <Route path="/" ponent={App}>
       <IndexRoute ponent={Home}/>
       <Route path="/login" ponent={Login} onEnter={redirectToDashboard}/>
       <Route path="dashboard" ponent={Dashboard} onEnter={redirectToLogin}/>
   </Route>

onEnter hooks

function redirectToLogin(nextState, replace) {
    // Perform some authentication check
    if (!loggedIn) {
        replace({
            pathname: '/login',
            state: { nextPathname: nextState.location.pathname }
        });
    }
}

function redirectToDashboard(nextState, replace) {
  // Perform some check if already authenticated 
    if (loggedIn) {
        replace('/dashboard')
    }
}

I want to redirect to Dashboard ponent from Login ponent after successful login.

• javascript
• reactjs
• react-router

1 Answer 1

To redirect you can use router object from context. You have to declare context types in your ponent (ponent from which you make redirection). More about context link

ES6/7 syntax:

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

Now you have access to router object and you can make redirection:

this.context.router.push('/dashboard');