Cuando envío al usuario a una URL (en este caso, /iniciar sesión y /registrarse y luego volver a /), los elementos de mi página no se cargan automáticamente al ingresar la URL, sino que tengo que actualizar manualmente para que el contenido carga.
Este es mi index.js que maneja las rutas (con el enrutador de reacción v6)
import Navbar from "./components/navbar/navbar"; import Footer from "./components/footer/footer"; import Home from "./pages/home/home"; import Login from "./pages/user/login/login"; import Signup from "./pages/user/signup/signup"; ReactDOM.render( <div> <Navbar /> <BrowserRouter> <Routes> <Route index path="/" element={<Home />} /> <Route path="/login" element={<Login />} /> <Route path="/signup" element={<Signup />} /> </Routes> </BrowserRouter> <Footer /> </div>, document.getElementById("root") );Este es un ejemplo de lo que sucede cuando envío al usuario a /login con el uso del componente Link que estoy importando a través de React-router. Antes de actualizar la URL en /login
Luego tengo que volver a cargar manualmente la página presionando el botón de recarga, solo después de hacerlo, se cargará el contenido. Después de actualizar la URL en /login
lo mismo se aplica si trato de volver a la página de inicio usando el componente Enlace antes de actualizar en la URL /
Luego tengo que volver a cargar para eliminar el cuadro de inicio de sesión Después de actualizar en la URL /
Si la navegación funciona pero las rutas no, entonces sospecho que las está representando en enrutadores separados. Noté que muestra la BrowserRouter de navegación fuera de su Navbar , y dado que la navegación está funcionando y actualizando la URL en la barra de direcciones, es bastante seguro asumir que esos enlaces están correctamente envueltos en un enrutador. De lo contrario, vería una advertencia/error invariable.
ReactDOM.render( <div> <Navbar /> // <-- must have another router if it is working <BrowserRouter> <Routes> <Route index path="/" element={<Home />} /> <Route path="/login" element={<Login />} /> <Route path="/signup" element={<Signup />} /> </Routes> </BrowserRouter> <Footer /> </div>, document.getElementById("root") ); Debe tener solo un enrutador que envuelva la aplicación y proporcione el contexto de enrutamiento a todos los componentes Routes , Route , Navigate , Link , etc.
Elimine cualquier enrutador extraño en otros componentes, como NavBar , y muévalos todos para que estén dentro del BrowserRouter que está representando aquí.
ReactDOM.render( <BrowserRouter> <Navbar /> <Routes> <Route index path="/" element={<Home />} /> <Route path="/login" element={<Login />} /> <Route path="/signup" element={<Signup />} /> </Routes> <Footer /> </BrowserRouter>, document.getElementById("root") );Reproduje el mismo comportamiento. CodeSandbox (pruébalo y mira home.js)
Parece que no estás usando la navegación de la página correctamente. La forma de mayor reacción es usar el gancho useNavigation() .