'React Router 6 - need to refresh page so that content changes

I have been learning ReactJs on Udemy where lessons are two years old, React Router is not 6 and I am not sure how to modify code so it could automatically refresh page content. This is my index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Header from "./Header/Header"
import reportWebVitals from './reportWebVitals';

import NavigationBar from "./NavigationBar/NavigationBar";
import TopStories from "./TopStories/TopStories";
import CroatiaNews from "./CroatiaNews/CroatiaNews";
import BusinessNews from "./BusinessNews/BusinessNews";
import EntertainmentNews from "./EntertainmentNews/EntertainmentNews";
import TechnologyNews from './TechnologyNews/TechnologyNews';
import SportsNews from './SportsNews/SportsNews';    
import {BrowserRouter, Route, Routes} from "react-router-dom";
    
    
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(
      <React.StrictMode>
            <div className='news-app-container'>
              <Header />
              <div className='news-container'>
                <NavigationBar />
                <BrowserRouter>
                    <Routes>
                      <Route path='/topstories' element={<TopStories/>} />
                      <Route path='/croatia' element={<CroatiaNews/>} />
                      <Route path='/business' element={<BusinessNews/>} />
                      <Route path='/entertainment' element={<EntertainmentNews/>} />
                      <Route path='/technology' element={<TechnologyNews/>} />
                      <Route path='/sports' element={<SportsNews/>} />
                    </Routes>
                  </BrowserRouter> 
                </div>
            </div> 
      </React.StrictMode>
    );
    
    reportWebVitals();

And this is my navigation bar:

import React from "react";
import "./NavigationBar.css";

import {BrowserRouter as Routes, NavLink} from "react-router-dom";

class NavigationBar extends React.Component {
    constructor(props) {
        super (props);
    }

    render () {
        return (
            <div className="navbar-container">
                <Routes>
                    <NavLink to='/topstories' className="nav-link active">
                            <i class="fa-solid fa-globe"></i>Top Stories
                    </NavLink>
                    <NavLink to='/croatia' className="nav-link">
                        <i class="fa-solid fa-flag"></i>Croatia
                    </NavLink>
                    <NavLink to='/business' className="nav-link">
                        <i class="fa-solid fa-business-time"></i>Business
                    </NavLink>
                    <NavLink to='/entertainment' className="nav-link">
                        <i class="fa-solid fa-film"></i>Entertainment
                    </NavLink>
                    <NavLink to='/technology' className="nav-link">
                        <i class="fa-solid fa-microchip"></i>Technology
                    </NavLink>
                    <NavLink to='/sports' className="nav-link">
                        <i class="fa-solid fa-person-biking"></i>Sports
                    </NavLink>
                </Routes>    
            </div>
        );
    }
}

export default NavigationBar;

I think the problem is ClassName but I am not sure how to change it because when I do there is no more CSS applying to my code:

.navbar-container {
    width: 280px;
    padding-top: 20px;
    float: left;
    padding-right: 20px;
    position: fixed;
}

.nav-link {
    font-size: 14px;
    color: black;
    text-decoration: none;
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 20px;
}

.nav-link.active {
    background-color:rgba(2, 162, 206, 0.25);
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    color: rgba(2, 162, 206);
}

.nav-link > .fa-solid {
    font-size: 18px;
    margin: 0 10px;
}

So everything is fine, only I need to refresh the page after clicking on something so it would change.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source