Por lo tanto, tengo una página de AdminScreen donde tengo algunos encabezados y una UL y debajo de la cual quiero definir algunos enlaces y cuando un usuario hace clic en ese enlace, quiero mostrar algún componente (pero quiero los encabezados y la UL de la página de AdminScreen quedarse allí).

En el enrutador de reacción v5, solo usaría el interruptor y definiría mis rutas y funcionaría. Pero no tengo idea de qué hacer con el enrutador de reacción v6. Intenté esto:

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

Pero, no funciona.

Por cierto, AdminRoute es solo la ruta para determinar si el usuario que ha iniciado sesión es administrador. Está funcionando bien en AdminScreen. De todos modos, aquí está el código para ello:

 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;

PD: ¿Cómo uso reaccionar enrutador v6 para cambiar entre componentes en un componente principal no responde a mi pregunta?