Automatic Redirect After Login With React-router


Answer :

React Router v3

This is what I do

var Router = require('react-router'); Router.browserHistory.push('/somepath'); 

React Router v4

Now we can use the <Redirect>component in React Router v4.

Rendering a <Redirect> will navigate to a new location. The new location will override the current location in the history stack, like server-side redirects.

import React, { Component } from 'react'; import { Redirect } from 'react-router'; export default class LoginComponent extends Component {     render(){         if(this.state.isLoggedIn === true){             return (<Redirect to="/your/redirect/page" />);         }else{             return (<div>Login Please</div>);         }     } } 

Documentation https://reacttraining.com/react-router/web/api/Redirect


React Router v0.13

The Router instance returned from Router.create can be passed around (or, if inside a React component, you can get it from the context object), and contains methods like transitionTo that you can use to transition to a new route.


React Router v2

Even though the question is already answered, I think it's relevant to post the solution that worked for me, since it wasn't covered in any of the solutions given here.

First, I'm using the router context on my LoginForm component

LoginForm.contextTypes = {   router: React.PropTypes.object }; 

After that, I can access the router object inside my LoginForm component

handleLogin() {   this.context.router.push('/anotherroute'); } 

PS: working on React-router version 2.6.0


Comments

Popular posts from this blog

Are Regular VACUUM ANALYZE Still Recommended Under 9.1?

Can Feynman Diagrams Be Used To Represent Any Perturbation Theory?