Nested routing using protected routes is not working properly

Question

earlier I posted a similar question: Method for checking admin is redirecting me to main page when trying to login

I tried to implement the protected route, inside a protectRoute.tsx:

import { Navigate, Outlet } from "react-router";
import { RootStateOrAny, useSelector } from "react-redux";

interface ProtectRouteProps {}

export default function ProtectRoute(props: ProtectRouteProps) {
  const userSignin = useSelector((state: RootStateOrAny) => state.userSignin);
  const { userInfo } = userSignin;

  return userInfo?.user?.isAdmin ? <Outlet /> : <Navigate to='/' />;
}

I don't really know what ProtectRouteProps is and what I should put in it. Also in the routing part I did like he told me:

<Route path='/createItem' element={<ProtectRoute />} />
<Route path='/createItem' element={<CreateItem />} />

The problem now is that can't access CreateItem because is going on the ProtectRoute page that is an empty one. What should i do?

Drew Reese · Accepted Answer · 2022-03-02 09:40:10Z

2

I don't really know what ProtectRouteProps is and what I should put in it.

There are no props. This is clear by the usage:

<Route path='/createItem' element={<ProtectRoute />} />

No props are passed to ProtectRoute. You can drop the props object:

import { Navigate, Outlet } from "react-router";
import { RootStateOrAny, useSelector } from "react-redux";

export default function ProtectRoute() {
  const userSignin = useSelector((state: RootStateOrAny) => state.userSignin);
  const { userInfo } = userSignin;

  return userInfo?.user?.isAdmin ? <Outlet /> : <Navigate to='/' replace />;
}

The problem now is that can't access CreateItem because is going on the ProtectRoute page that is an empty one. What should i do?

"Auth" routes are what are called layout routes. They apply some logic, perhaps some styled layout CSS, and render an Outlet for nested Route components to be rendered into. The nested Route components use the path prop for route matching.

Example:

<Route element={<ProtectRoute />}>
  <Route path='/createItem' element={<CreateItem />} />
  ... other protected routes ...
</Route>

edited Mar 2, 2022 at 9:40

answered Mar 2, 2022 at 9:28

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Razmi Over a year ago

It finally worked, now I understood what I did wrong, I wasn't closing the <Route element={<ProtectRoute />}> tag

Drew Reese Over a year ago

@Razmi Well, it was technically closed (self-closed), which is valid JSX.... it just wasn't wrapping the route/routes you wanted to protect. This was a much better follow-on question from your initial post, BTW. Cheers and good luck!

Deepak Singh · Accepted Answer · 2022-03-02 09:51:54Z

 <Route exact path='/Login' element={<Login name="Login Page"></Login>}></Route>
    <Route element={<Protected/>}> 
    <Route exact path='/' element={<Home/> }></Route>
    <Route exact path='/Content' element={<Content />}></Route>
    </Route>

   <Route path='*' element={<Login/>} ></Route>
  </Routes>

Create Protected.js

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

   const useAuth = ()=>{
    if(localStorage.getItem("isLogged")){
    const user = {loggedIN :true};
    return user && user.loggedIN
    }else{
    const user = {loggedIN :false};
    return user && user.loggedIN
   }

 }

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

export default Protected

Collectives™ on Stack Overflow

Nested routing using protected routes is not working properly

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related