0
250
ViewsReact Router v6 siempre renderiza "/"
Estoy tratando de implementar el enrutador en reaccionar-crear-aplicación, pero siempre muestra "/" y muestra la página de inicio o de inicio de sesión. ¿Como puedo resolver esto?
function AppRouter({ isLoggedIn, user }) { return( <Router> <Routes> <Route path="/profile" element={<Profile />} /> <Route path="/signUp" element={<SignUp />} /> {isLoggedIn ? <Route exact path={"/"} element={<Home user={user}/>} /> : <Route exact path={"/"} element={<SignIn />} /> } </Routes> </Router> ) }1 answers
Answer question0
Parece que tiene un ligero malentendido sobre cómo funciona el HashRouter con la interfaz de usuario.
import { HashRouter as Router, Route, Routes } from "react-router-dom"; import Profile from "./Profile"; import SignUp from "./SignUp"; import Home from "./Home"; export default function App() { return ( <Router> <Routes> <Route path="/profile" element={<Profile />} /> <Route path="/signUp" element={<SignUp />} /> <Route path="/" element={<Home />} /> </Routes> </Router> ); } El HashRouter maneja el enrutamiento con un valor hash de URL, es decir, todo lo que está después del "#" en la URL. Si está intentando renderizar su aplicación y acceder a "<domain>/" en lugar de "<domain>/#/" el enrutamiento no funcionará.
Por ejemplo, en la demostración de Codesandbox en ejecución, la URL base es "https://5p7hff.csb.app/" . En esta URL base, el enrutador hash no funciona realmente, y en su lugar debería acceder a "https://5p7hff.csb.app/#/" para que el enrutador hash se cargue y el enrutamiento interno de la aplicación pueda funcionar.
Desde "https://5p7hff.csb.app/#/" debe estar para luego navegar a cualquiera de sus rutas, es decir, "https://5p7hff.csb.app/#/profile" y https://5p7hff.csb.app/#/signUp" .
Si cambia a un enrutador diferente, como BrowserRouter , entonces "/#/" ya no se usa, el enrutador y las rutas se procesan desde "/" desde donde se ejecuta la aplicación. Las rutas serían "https://5p7hff.csb.app/" , "https://5p7hff.csb.app/profile" y "https://5p7hff.csb.app/signUp" .