0

I am following this to create protected routes.

Protected Route Component

import React from 'react';

export const ProtectedRoute = ({ isAuthenticated, path, children, navigate, location }) => {

    const hasPreviousState = location.key !== 'default';    
    if (isAuthenticated) {
        if (hasPreviousState) {
            console.log('previous state');
            navigate(-1);
        } else {
            console.log('no previous state')
            navigate('/');
        }    
    }
    return children;
}

However, this doesn't seem to work now that I tried it out. The following states I'm trying to achieve are the following:

  • If user is authenticated and there was a previous path, go back (navigate(-1)). A scenario this would occur would be if the user was already on the site and they try to log in whilst already logged in.
  • If the user is authenticated and there was no previous path, go to home page (navigate('/')). A scenario this would occur if the user opens a new tab or window and enters the following url: https://website.com/login

The line const hasPreviousState = location.key !== 'default; never returns true. Not sure why..

What am I missing?

Note I am using react-router-dom v6.

jeff
  • 490
  • 1
  • 6
  • 21
  • ***Why*** are you trying to override the back navigation behavior? Does this help answer your question about creating route protection? https://stackoverflow.com/a/66289280/8690857 – Drew Reese Aug 17 '22 at 20:35
  • @DrewReese Hello, thanks for your response. I'm not too sure what you mean by your first question. Is the desire result I want not something that I should be doing? – jeff Aug 17 '22 at 20:43
  • Sort of. You shouldn't try to keep users from leaving your app. That's based on the title of your question and the SO post you linked to. Outside this it sounds like the bedrock of your question is about redirecting users off protected routes when they are not authenticated. Typically you just bounce unauthenticated users to your login route, and *that* component handles redirecting back to the route they were trying to access, or back to your home page. There's not any back navigations (i.e. POPs) involved with this. – Drew Reese Aug 17 '22 at 20:46
  • @DrewReese I decided to go this path because there are other routes that shouldn't be accessed. For example, if the user is signed in, then they shouldn't be able to access ```/login``` or ```/sign-up```. So I thought what made sense was to redirect them back to the previous page. – jeff Aug 17 '22 at 20:51
  • Route protection is route protection. You can certainly make another "protected route" component that inverts the protection condition. These are typically named `AnonymousRoute` where ***only*** unauthenticated users are allowed access and the user is bounced to some non-anonymous route. – Drew Reese Aug 17 '22 at 20:53
  • If it helps, here's an [answer](/a/72469042/8690857) of mine that shows this pattern. – Drew Reese Aug 17 '22 at 21:04

0 Answers0