I am new to React Router and I am encountering some strange behavior. I am currently using React Router 5.2.0. I have created a simple navigation link that links to the component. The links update fine, but it doesn't render the component for the appropriate route. It only renders the component only after I refresh the page. In this example, it would be for the Music component and the Languages component.

Here is my navigation.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>

    )
}

and here is my app.js file:

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;

Any ideas why this is happening? I'm not sure what I am doing wrong. Am I using <Router> or <Route> in the correct manner? Any help is appreciated. Take care!