Actualmente tengo problemas con el enrutador de reacción dom@6. Me gusta, quiero redirigir a los usuarios a otras páginas si iniciaron sesión. Pero cuando uso el componente Navigate, arrojó un error que dice que:
"[Navegar] no es un componente. Todos los componentes secundarios de Rutas deben ser una Ruta o React.Fragment"
Aunque lo he envuelto en el fragmento, el resultado sigue siendo el mismo. Por favor ayúdenme, este es mi código:
import {BrowserRouter as Router, Routes, Route, Navigate} from 'react-router-dom'; import Home from './pages/Home'; import ProductList from './pages/ProductList'; import Product from './pages/Product'; import Register from './pages/Register'; import Login from './pages/Login'; import Cart from './pages/Cart'; import ErrorPage from './pages/ErrorPage'; function App() { const user = true; return ( <Router> <Routes> <Route path="/" element={<Home/>} /> <Route path="/products/:category" element={<ProductList/>} /> <Route path="/product/:id" element={<Product/>} /> <Route path="/cart" element={<Cart/>} /> <Route path="/dang-ky" element={<Register/>} /> <Route path="/dang-nhap" element={<Login/>} > {user ? <><Navigate to="/" replace/></> : <Login/>} </Route> <Route path="*" element={<ErrorPage/>} /> </Routes> </Router> ); } export default App;Redirigir a los usuarios si iniciaron sesión, necesariamente no necesita una navegación, simplemente puede especificar el elemento al que desea llegar, por ejemplo:
<Route exact path="/" element={user ? <Home/> : <Login />}/>Simplemente puede usar el componente Navigate de la biblioteca 'react-router-dom' y usarlo para redirigir dentro del atributo del elemento de la ruta '/login'.
import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom"; <Route path="login" element={user ? <Navigate to="/"/> : <Login />} /> {/* If user is logged in, then redirect to home page, else go to login page */}Editar:
Esta también es una posible solución, el inconveniente es que no puede redirigir correctamente. Solo tiene que asegurarse de que tiene las rutas alternativas configuradas correctamente.
{isSignedIn && <Route path="" element={} />}Recomendaría usar un AuthRout para envolver sus rutas.
function AuthRoute ({children}) { if(!user.isSignedIn){ //Not signed in return <Navigate to="/signIn" /> } //Signed in return children } //Route itself <Route path="/abc" element={<AuthRoute><YourComponent /></AuthRoute>} />De esa manera, el usuario es redirigido si no ha iniciado sesión.