Automatic redirection after logging in using a relay

Question

I wanted to create a facebook login in my action / response-router / flux application. I have a listener registered in the login event and would like to redirect the user to "/ dashboard" if they are logged in. How can i do this? Location.push does not work very well, except after a full page reload.

Answer 1

React Router v0.13

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

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.

The mapping a <Redirect> move to a new location. The new location will override the current location in the history stack, such as server-side redirection.

 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

React Router v2

Even if the question has already been given, I consider it appropriate to publish a solution that worked for me, since it was not covered by any of the solutions given here.

First, I use a router context for 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 with React-router version 2.6.0

Answer 4

React Router v3

Out of Component Navigation

create an application using a 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 Redux or Flux middleware:

 import { browserHistory } from 'react-router' // Go to /some/path. browserHistory.push('/some/path') // Go back to previous location. browserHistory.goBack() 

response-router / tree / v3 / docs

Answer 5

React Router v3

Component navigation

You should use the withRouter decorator when you need to redirect inside the 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 (component of a higher order), which wraps another component to enhance its details with the repeaters of the router.

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

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

You can specify the router as a support for the wrapper component to override the router object from the context.

Answer 6

In your store:

 data.router.transitionTo('user'); 

And the router has:

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

User - route handler