Cuando hago clic en un enlace, actualizará la URL correctamente. Sin embargo, el componente asociado a esa ruta no aparecerá en pantalla.
índice.js:
const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <BrowserRouter> <App /> </BrowserRouter> );Aplicación.js:
function App() { return ( <div className="App"> <h1> React Router Tester </h1> <Routes> <Route path="/Home" component = {Home}/> </Routes> <Link to="/Home"> Test </Link> </div> ); } export default App;La API react-router-dom ha cambiado en las últimas versiones.
En vez de
<Route path="/Home" component={Home} />usar
<Route path="/Home" element={<Home />} />