<Routes> {!userlog ? ( <Route path="/" element={<AuthLayout />}> <Route index element={<Login />} /> <Route path="/login" element={<Login />} /> <Route path="/signin" element={<Login />} /> <Route path="/forgotpassword" element={<ForgotPassword />} /> <Route path="/changepassword" element={<ChangePassword />} /> </Route> ) : userlog?.user_type===1?( <Route path="/" element={<HomeLayout />}> <Route index element={<HomePage />} /> <Route path="viewproduct/:id" element={<ViewPage />} /> <Route path="cartlist" element={<CartList />} /> </Route> ): <Route path="/" element={<AdminLayout />}> <Route index element={<Dashboard />} /> <Route path="listproducts" element={<ProductsList />} /> </Route> } <Route path="*" element={<Navigate to={"/"} />} /> </Routes> Lo que quiero,
Escenario 1 (usuario sin iniciar sesión): si el usuario intenta navegar por "/cartlist", se le redirigirá a la página de inicio de sesión. Si el usuario intenta navegar por algo que no forma parte de la ruta de la ruta, desea navegar por la página 404 no encontrada.
Escenario 2 (usuario conectado): si el usuario intenta navegar "/iniciar sesión", se le redirigirá a la página del panel. Si el usuario intenta navegar por algo que no forma parte de la ruta de la ruta, desea navegar por la página 404 no encontrada.
Ahora lo que obtengo es,
El usuario intenta navegar por cualquier otra ruta, navega a la página "/".
NOTA: No quiero poner una ruta privada para cada ruta y también quiero una ruta de enrutamiento como esta solamente.
Gracias por adelantado....
Por supuesto, debido a esta línea, irá a "/":
<Route path="*" element={<Navigate to={"/"} />} />Con el nuevo react-router v6 puede usar esto cambiando:
// 404 route <Route path="*" element={<NotFoundPage />} /> NotFoundPage será su componente para decirles a los usuarios que no se encuentra la página.
Además, para estos, creo que debe colocar una barra inclinada / antes del nombre de la ruta
<Route path="/viewproduct/:id" element={<ViewPage />} /> <Route path="/cartlist" element={<CartList />} /> <Route path="/listproducts" element={<ProductsList />} />La razón por la que siempre se resuelve en "/" es porque elegirá la primera ruta que coincida con el patrón dado, incluso si es una coincidencia parcial. Dado que todas sus rutas comienzan con "/", por ejemplo. "/iniciar sesión", etc., siempre coincide con "/".
Puede evitar esto con el parámetro "exacto":
<Route exact path="/" element={<AuthLayout />}>