javascript - redirect to a page programmatically in react-router 2 - Stack Overflow

admin管理员组

文章数量:1324979

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

Share Follow asked Mar 15, 2016 at 21:15 WitVaultWitVault 24.1k2020 gold badges106106 silver badges137137 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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');

本文标签： javascriptredirect to a page programmatically in reactrouter 2Stack Overflow