Estoy usando React-Router-Dom para navegar entre dos elementos javascript en un dapp create-react-app pero cuando lo uso carga los elementos en la parte superior de la página y simplemente agrega la página al final del enlace (localhost/page ).
Mi objetivo es que la página se vuelva a cargar a la nueva página al hacer clic en el botón de enlace con un nuevo fondo y estilo (ya hecho para esa página)
Código App.js
<Router> <s.Screen> <Navbar /> <Routes> <Route path="/MyPandas" element={MyPandas} exact></Route> </Routes> /* Rest of Code */ </Router>Mi otra página está envuelta en un componente de fragmento
<Fragment> /* Code */ </Fragment>Suponiendo que sus enlaces funcionen correctamente, y parece que lo hacen si la URL en la barra de direcciones se actualiza a "/MyPandas" .
El problema es que al element prop no se le pasa un valor correcto. react-router-dom@6 La propiedad del element del componente de Route toma un ReactNode , también conocido como JSX, no una referencia a un componente React. Pase <MyPandas /> en lugar de MyPandas .
<Route path="/MyPandas" element={<MyPandas />} /> Nota: No es necesario el accesorio exact . No solo no existe en la API del componente de Route RRDv6, sino que todas las rutas ahora siempre coinciden exactamente.
use exacta en sus Rutas, por ejemplo: <Route path='/products' exact>