在 React Router v6 中的其他组件之间切换时，如何让 parent 组件保持不变？

Question

所以，我有一个 AdminScreen 页面，其中有一些标题和一个 ul，下面我想定义一些 links，当用户点击那个 link 时，我想呈现一些组件（但我希望 AdminScreen 页面的标题和 ul 保留在那里）。

在 react router v5 中，我只需要使用 switch 并定义我的路由就可以了。但是，我不知道如何处理 react router v6。我试过这个：

 <ul className="admin-functions">
            <li>
              <Link to="/admin/userslist"> Users List </Link>
            </li>
            <li>
              <a href="/admin/pizzaslist"> Pizzas List </a>
            </li>
            <li>
              <a href="/admin/addpizza"> Add New Pizza </a>
            </li>
            <li>
              <a href="/admin/orderslist"> Orders List </a>
            </li>
          </ul>

          <Routes>
          <Route path="/admin/userslist" element={
            <AdminRoute>
                <UsersList />
            </AdminRoute>  
        } />
        <Route path="/admin/pizzaslist" element={
          <AdminRoute>
            <PizzasList />
          </AdminRoute>
        } />
        </Routes>

但是，它不起作用。

顺便说一句，AdminRoute 只是确定登录用户是否为管理员的路由。它在 AdminScreen 上运行良好。不管怎样，这是它的代码：

import { Navigate } from "react-router-dom";
import React from "react";
import { useSelector } from "react-redux";

const AdminRoute = ({ children }) => {
  const loginUserReducer = useSelector((state) => state.loginUserReducer);

  const { userInfo } = loginUserReducer;

  const useAuth = () => {
    const user =
      localStorage.getItem("userInfo") && Object.entries(userInfo).length > 0;
    if (user && userInfo.isAdmin) {
      return true;
    } else {
      return false;
    }
  };

  const auth = useAuth();
  return auth?children: <Navigate to="/login"/>
};

export default AdminRoute;

P.S: 没有回答我的问题

Answer 1

所以，我想通了：

在我的 App.js 中，将通配符添加到管理屏幕组件的 link 中：

<Route path="/admin/*" element={
          <AdminRoute>
            <AdminScreen />
          </AdminRoute>
        } />

在 AdminScreen 组件中，将路由路径更改为：

<Route path="userslist" element={
            <AdminRoute>
                <UsersList />
            </AdminRoute>  
        } />

在 React Router v6 中的其他组件之间切换时，如何让 parent 组件保持不变？

How do I make parent component stay while switching between other components in react router v6?

javascript

reactjs

react-router

react-router-dom