react router - Redirection after login

Question

Could you please help me in understanding the redirection mechanism I could use with latest version of react router ( v1.1.0 ) . I would like to redirect to a url depending on the success or failure of user login . I have tried to do the following First created a history using.

let history = createBrowserHistory();

then tried to push the state using

history.pushState(null, 'abc')

Nothing is happening. Could you please let me know the correct way to do transitions .From the docs I understood that transitionTo() API is not present in the latest versions. It will be great If you could point to a simple working example.

Possible duplicate of [Automatic redirect after login with react-router](http://stackoverflow.com/questions/29594720/automatic-redirect-after-login-with-react-router) — Paul Roub, Jan 19 '16 at 18:39

score 42 · Answer 1 · edited Aug 09 '21 at 12:27

Wanted to update this thread because I spent a good amount of time digging around on this. In React Router 2.0.x, replaceState is deprecated in favor of replace. See here for details: https://github.com/ReactTraining/react-router/blob/v2.0.0/upgrade-guides/v2.0.0.md#link-to-onenter-and-isactive-use-location-descriptors

The correct way to do this would be something like this:

function requireAuth(nextState, replace) {
  if (!userExists()) {
    replace({
      pathname: '/signin',
      state: { nextPathname: nextState.location.pathname }
    })
  }
}

export const renderRoutes = () => (
  <Router history={browserHistory}>
      <Route path="protectedRoute" component={Protected} onEnter={requireAuth} />
      <Route path="signin" component={SignIn} />
    </Route>
  </Router>
);

Then, in the SignIn component, you can redirect after a successful sign in like this:

signInFunction({params}, (err, res) => {
  // Now in the sign in callback
  if (err)
    alert("Please try again")
  else {
    const location = this.props.location
    if (location.state && location.state.nextPathname) {
      browserHistory.push(location.state.nextPathname)
    } else {
      browserHistory.push('/')
    }
  }
})

This is the better answer than the accepted. +1 for the signin function. — technophyle, Mar 24 '17 at 03:51
these React repos keep migrating! https://github.com/ReactTraining/react-router/blob/v2.0.0/upgrade-guides/v2.0.0.md#link-to-onenter-and-isactive-use-location-descriptors — ptim, Apr 03 '17 at 07:18
onEnter no longer exists on react-router-4. You should use to get your desired functionality. https://reacttraining.com/react-router/web/api/Redirect — M.Kumaran, Oct 26 '18 at 10:39

score 19 · Answer 2 · answered Dec 07 '15 at 07:21

You can register "hooks" on your routes that get triggered when you enter and leave the routes. Check out the documentation for onEnter and onLeave hooks.

There is also an example of requiring auth on a route and redirecting to a different path if the user is not logged in.

Here's a snippet taken from the require auth example within app.js:

function requireAuth(nextState, replaceState) {
  if (!auth.loggedIn())
    replaceState({ nextPathname: nextState.location.pathname }, '/login')
}

// And from the route configuration, use the requireAuth function in onEnter...
<Router history={history}>
  <Route path="/" component={App}>
    <Route path="login" component={Login} />
    <Route path="logout" component={Logout} />
    <Route path="about" component={About} />
    <Route path="dashboard" component={Dashboard} onEnter={requireAuth} />
  </Route>
</Router>

The nextState and replaceState arguments are objects from rackt/history and get injected into the method you pass into onEnter.

Thanks .One more query . Is in react router equivalent to a view in angular ? — Mahesh Govind, Dec 08 '15 at 03:05
Might consider using new terminology in your response given the buzz around [React Hooks](https://github.com/reactjs/rfcs/pull/68) as of late. — Jordan Arsenault, Nov 13 '18 at 07:16

score 11 · Answer 3 · answered Jan 25 '18 at 19:14

11

React Router v4.2

I am using React-16.2 & React-router-4.2

and I get solution by this 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

answered Jan 25 '18 at 19:14

MD Ashik

9,117
10
52
59

2

Work like charm – Hitesh Sahu Sep 04 '18 at 12:49
my not working though path get updated but not not loading '/' path – Aayush Neupane Jun 12 '20 at 07:27

JohnSz · Answer 4 · 2016-05-10T17:19:13.443

@terranmoccasin 's answer is correct. However there is a common need very few examples address.

Let's say you need to secure several routes (dashboard1, dashboard2, ...). How do you redirect back to the original page once you log in successfully? In other words, what do you do with {nextPathname: nextState.location.pathname}?

Here's what I do in ./containers/LoginContainer.js:

import { push } from 'react-router-redux';
const mapStateToProps = (state) => ({
  nextPathname: state.routing.locationBeforeTransitions.state.nextPathname,
});
const mapDispatchToProps = (dispatch) => ({
  changeLocationOnSignIn: (nextPathname) => {
    dispatch(push(nextPathname));
  },
});

and in ./components/Login.js

componentWillReceiveProps(nextProps) {
  // user signed in or signed up, assuming redux. you may use this elsewhere.
  if (nextProps.user.status === 'authenticated' && nextProps.user.user &&
     !nextProps.user.error) {
       this.props.changeLocationOnSignIn(this.props.nextPathname);
  }

React-router 2.4.0 (April 2016) introduced withRouter which creates a HOC. However it wraps React.createClass, not a JS class. I haven't been able to get it working with redux-form, etc. Besides I think the above code is easier to comprehend.

In reference to @justabuzz, I should mention I was using Redux and I wanted the redirection to be logged with Redux. Otherwise push() is OK. — JohnSz, Jun 17 '16 at 15:07

score 7 · Answer 5 · answered Apr 22 '20 at 21:31

i want just share the actual answer at 2020 year. The main way for storing previous location in state is the same. But onEnter was removed from library. Now we can use AuthRoute as in the documentation:

<AuthRoute exact path="/food">
  <Food />
</AuthRoute>
<Route exact path="/login">
  <Login />
</Route>

const AuthRoute = ({ children, isAuthorized, ...rest }) => {
  const loginLink = usePrepareLink({
    to: "/login",
    isRelativePath: true
  });

  return (
    <Route {...rest} render={({ location }) =>
      isAuthorized ? (
        children
      ) : (
        <Redirect to={{
          ...loginLink,
          state: { from: location }
        }} />
      )
    } />
  );
};

and we can use the state to restore previouse URL after login

const onSignIn = useCallback(() => {
  setIsAuthorized(value);
  const link = (state && state.from) || "/restore-prevented-route";
  history.replace(link);
}, [setIsAuthorized, value, history, state]);

The details you can find here (or RU)

score 3 · Answer 6 · answered Feb 23 '21 at 06:39

3

This helps me.

Redirect to Login After Logout

import { useHistory } from "react-router-dom";
const history = useHistory();
history.push("/login");

answered Feb 23 '21 at 06:39

Jose Cortez

51
2

score 1 · Answer 7 · answered Jan 09 '21 at 11:59

onEnter no longer exists on react-router-4, You can make use of <Route render={ ... } /> to achieve the same functionality.

Here is an example of the same.

<React.Fragment>
    <Switch>
      <Route path="/dashboard" render={() => (isAuth() ? <Redirect to="/login" /> : <DashboardRoutes />)} />
      <Route path="/login" component={Login} />
    </Switch>
</React.Fragment>

isAuth() in my case is a function that basically check whether we have the auth token or not and returns true/false based on that.

function isLoggedIn() {
  if (!localStorage.getItem('token')) {
    return true;
  }
  return false;
}

score 0 · Answer 8 · answered Jun 15 '16 at 11:42

As @JohnSz mentions I too had issues with using withRouter. Instead I did it as instructed here: https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md#programmatic-navigation

const RouteComponent = React.createClass({
  contextTypes: {
    router: React.PropTypes.object.isRequired
  },
  someHandler() {
    this.context.router.push(...)
  }
})

Basically:

Define contextType
Use this.context.router.push(...)

Cheers.

score 0 · Answer 9 · answered Nov 29 '22 at 04:24

You can set a condition for the success and failure. Then use the useNavigate hook.

import { useNavigate } from "react-router-dom";

function useLogoutTimer() {
  const userIsInactive = useFakeInactiveUser();
  const navigate = useNavigate();

  useEffect(() => {
    if (userIsInactive) {
      fake.logout();
      navigate("/url");
    }
  }, [userIsInactive]);
}

Read more: https://reactrouter.com/en/main/hooks/use-navigate

score 0 · Answer 10 · edited Mar 15 '23 at 18:42

0

After login success message, just one line code just add your page link to redirect

alert("Login  Successfully");

window.location.replace("/PageLink");

edited Mar 15 '23 at 18:42

Tyler2P

2,324
26
22
31

answered Mar 02 '23 at 10:45

Jeevan Shinde

1
2

react router - Redirection after login

10 Answers10

This helps me.

Linked