Tengo una ruta de usuario con dos hijos.
Usé path="*" en el caso de que la URL no coincida con un usuario para que luego devuelva UserNotFoundPage.
El problema es que, si bien me da UserNotFoundPage cuando la URL es .../user/someIncorrectUsername , me da una página vacía si solo ingreso .../user/ o .../user . Si bien hubiera esperado que me llevara a UserNotFoundPage.
¿Cómo puedo obtener este comportamiento?
Aquí está mi código:
<Router> <Routes> {/* PUBLIC */} <Route path="*" element={<Navigate replace to="/welcome"/>}/> <Route path="/welcome" element={<HomePage/>}/> <Route path="/dashboard" element={<DashboardPage/>}/> {/* RESTRICTED */} <Route path="/login" element={<LoginPage/>}/> {/* PRIVATE */} <Route path="/user" element={<Users/>}> <Route path="*" element={<UserNotFoundPage/>}/> <Route path="username" element={<UserProfilePage/>}> </Route> </Route> </Routes> </Router> function useAuth() { return true; } function HomePage() { return ( <div> <h1>HOME PAGE</h1> </div> ) } function UserNotFoundPage() { return ( <div> <p>User not found</p> </div> ) } function Users() { const auth = useAuth(); return auth ? <Outlet/> : <Navigate to="/login"/>; } function UserProfilePage() { return ( <div> <h4>USER PROFILE PAGE</h4> </div> ) } function LoginPage() { return ( <div> <h2> Login page </h2> </div> ) }El problema aquí es que, de manera abstracta, "/usuario" también representa una ruta de ruta que se puede hacer coincidir y representar, a través de Outlet , pero no hay contenido para representar en una ruta "/usuario" exactamente coincidente.
Se debe usar un
<Outlet>en los elementos de ruta principales para representar sus elementos de ruta secundarios. Esto permite que la interfaz de usuario anidada se muestre cuando se representan las rutas secundarias. Si la ruta principal coincide exactamente , generará una ruta de índice secundaria o nada si no hay una ruta de índice .
Puede especificar que la ruta UserNotFoundPage sea la ruta que coincida y se represente en "/usuario", así como en cualquier ruta "/usuario/*" que no coincida, especificándola como la ruta de índice.
<Route path="/user" element={<Users/>}> <Route index path="*" element={<UserNotFoundPage/>}/> <Route path="username" element={<UserProfilePage/>}> </Route>