Soy nuevo en React Router y me encuentro con un comportamiento extraño. Actualmente estoy usando React Router 5.2.0. He creado un enlace de navegación simple que enlaza con el componente. Los enlaces se actualizan bien, pero no representan el componente para la ruta adecuada. Solo representa el componente solo después de actualizar la página. En este ejemplo, sería para el componente Music y el componente Languages .

Aquí está mi navegación.js:

 import React from 'react'; import {NavLink} from 'react-router-dom'; export const Navigation = () =>{ return( <ul className = "navList"> <li className = "listItem">Programming</li> <li className = "listItem">Exercise</li> <li className = "listItem"><NavLink to = "/music">Music</NavLink></li> <li className = "listItem"><NavLink to = "/languages">Languages</NavLink></li> <li className = "listItem">Travel</li> <li className = "listItem">Inspiration</li> </ul> ) }

y aquí está mi archivo app.js:

 import './App.css'; import React from 'react'; import {Navigation} from './Components/navigation'; import {Music} from './Components/music'; import {Languages} from './Components/languages'; import {BrowserRouter as Router,Route} from 'react-router-dom'; function App() { return ( <Router> <> <header className = 'header'> Life <Navigation/> </header> <Route path = "/music"> <Music/> </Route> <Route path = "/languages"> <Languages/> </Route> </> </Router> ) } export default App;

¿Alguna idea de por qué sucede esto? No estoy seguro de lo que estoy haciendo mal. ¿Estoy usando <Router> o <Route> de la manera correcta? Cualquier ayuda es apreciada. ¡Cuídate!