Automatic redirect after login with react-router

Question

I wanted to build a Facebook login into my react/react-router/flux application. I have a listener registered on the login event and would like to redirect t

Answer 1

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

Answer 2

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

Answer 3

In your store:

data.router.transitionTo('user');

And router has:

"Route name="user" handler={User}"

User is route handler

Answer 4

React Router v4.2.0

I am using React-16.2.0 & React-router-4.2.0

And I get solution by this code this.props.history.push("/");

My working code:

.then(response => response.json())
.then(data => {
    if(data.status == 200){
        this.props.history.push("/");
        console.log('Successfully Login');
  }
})

I was following this document redirect-on-login-and-logout

I was also try by return <Redirect to='/' /> But unlucky, this not working for me.

Answer 5

React Router v3

Navigating Outside of Components

create your app with Router like this

// Your main file that renders a <Router>:
import { Router, browserHistory } from 'react-router'
import routes from './app/routes'

render(
  <Router history={browserHistory} routes={routes} />,
  mountNode
)

Somewhere like a Redux middleware or Flux action:

import { browserHistory } from 'react-router'

// Go to /some/path.
browserHistory.push('/some/path')

// Go back to previous location.
browserHistory.goBack()

react-router/tree/v3/docs

Answer 6

React Router v3

Navigating inside components

You should use withRouter decorator when it's necessary to redirect inside a component. The decorator uses context instead of you.

import {withRouter} from 'react-router'

fucntion Foo(props) {
    props.router.push('/users/16');
}

export default withRouter(Foo);

withRouter(Component, [options])

A HoC (higher-order component) that wraps another component to enhance its props with router props.

withRouterProps = { ...componentProps, router, params, location, routes }

Pass in your component and it will return the wrapped component.

You can explicit specify router as a prop to the wrapper component to override the router object from context.