I am facing some issue in protected routes in react js, please see below code:

import { Navigate, Outlet } from 'react-router-dom';
  
export const PrivateRoute = ( { auth } ) => {
    if (!auth) {
      return <Navigate to='/login' />;
    }
    return <Outlet />;
};

And than i put some login in App.js

<Route element={<PrivateRoute auth={auth} />} >
  <Route path="/dashboard" element={ <Dashboard /> } />
  <Route path="/strategies" element={ <Strategies /> } />
  <Route path="/deployed" element={ <Deployed /> } />
  <Route path="/subscribe-strategy" element={ <Subscribed /> } />
</Route>

What problem i am facing is , if i am on strategies page and than i refresh the page than the page redirected on dashboard, so i don't know how to fix this problem...

please let me know about this problem

CodePudding user response：

I am using this as private route this works for react-router v6

import React from "react";
import { useLocalStorage } from "hooks/useLocalStorage";
import { Navigate } from "react-router-dom";

const PrivateRoute = ({ redirectTo, component , isAuth }) => {
  return isAuth ?  component : <Navigate to={redirectTo} />;
};

export default PrivateRoute;

and using it like this

<Route
path="/"
element = {
<PrivateRoute redirectTo="/auth" component={<Home/>} isAuth={authntication}/>
}

CodePudding user response：

This is a clean way that I use react-router-dom v6.

1- I create a separated file named ProtectedRoutes

import { Navigate, Outlet } from "react-router-dom";

const useAuth = () => {
  const user = { loggedIn: localStorage.getItem("tokenId") };
  return user && user.loggedIn;
};

const ProtectedRoutes = () => {
  const isAuth = useAuth();
  return isAuth ? <Outlet /> : <Navigate to="/" />;
};

export default ProtectedRoutes;

2- Import above file and use it like this:

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import other components that you need...

<BrowserRouter>
      <Routes>
        <Route path="*" element={<NotFoundPage />} />
        <Route path="/" element={<LoginPage />} />
        <Route element={<ProtectedRoutes />}>
          <Route path="/user-list" element={<UserListPage />} />
          <Route path="/add-user" element={<AddUserPage />} />
          <Route path="/user-details/:id" element={<UserDetailsPage />} />
          <Route path="/update-user/:id" element={<UpdateUserPage />} />
        </Route>
      </Routes>
    </BrowserRouter>

CodePudding user response：

I used specific component Routes tag.

My ProtectedRoute is here. İt is specific component.

const ProtectedRoute = ({ roles, children, isLoggedIn, role }) => {

    return isLoggedIn
        ? Array.from(roles).some(r => r === role || role === ROLE.ROLE_ADMIN)
            ? children
            : <Navigate to={PATH_DEFAULT} replace />
        : <Navigate to="/login" />

}

const mapStateToProps = (store) => {
    return {
        isLoggedIn: store.isLoggedIn,
        username: store.username,
        jwttoken: store.jwttoken,
        role: store.role,
        userId: store.userId
    };
};
export default connect(mapStateToProps)(ProtectedRoute);

RouteList variable is here.

export const  RouteBaseList = [
    {
        path : "*",
        roles : [ROLE.ROLE_ADMIN, ROLE.ROLE_MANAGER] ,
        element : <Navigate to="/"/>,
        key : PATH.PATH_DEFAULT,
        protectedRoute: false,
    },
    {
        path : PATH.PATH_DEFAULT,
        roles : [ROLE.ROLE_ADMIN, ROLE.ROLE_MANAGER] ,
        element : <HomePage />,
        key : PATH.PATH_DEFAULT,
        protectedRoute: true,
    },
    {
        path : PATH.PATH_INDEX,
        roles : [ROLE.ROLE_ADMIN, ROLE.ROLE_MANAGER] ,
        element : <HomePage />,
        key : PATH.PATH_INDEX,
        protectedRoute: true,
    },
...
...
]

I used map via route list variable.

  {
    RouteBaseList.map((route, index) =>
      <Route path={route.path} element={
        route.protectedRoute ?
        <ProtectedRoute roles={[...route.roles]}>
          {route.element}
        </ProtectedRoute>
        : 
        route.element
      } />
    )
  }

Routes is here.

<Routes>
  {routeList}
</Routes>