使用受保护路由的嵌套路由无法正常工作

Question

早些时候我发布了一个类似的问题： 检查管理的方法在尝试登录时将我重定向到主页

我尝试在 protectedRoute.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='/' />;
}

我真的不知道 ProtectRouteProps 是什么以及我是什么应该放进去。同样在路由部分，我确实像他告诉我的那样：

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

现在的问题是无法访问 CreateItem，因为正在访问的 ProtectRoute 页面是一个空页面。我应该怎么办？

Answer 1

我真的不知道 ProtectRouteProps 是什么以及我应该在其中放入什么。

没有道具。从用法可以清楚地看出这一点：

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

没有道具传递给 ProtectRoute。您可以删除 props 对象：

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 />;
}

现在的问题是无法访问 CreateItem，因为正在发生
ProtectRoute 页面是空的。我该怎么办？

“Auth”路由就是所谓的 布局路由 。它们应用一些逻辑，也许是一些样式布局 CSS，并为要渲染的嵌套 Route 组件渲染一个 Outlet。嵌套的 Route 组件使用 path 属性进行路由匹配。

例子：

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

Answer 2

 <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>

创建受保护的.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