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 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 page after clicking on something so it would change.

>Solution :

Issues

1. The NavigationBar is rendered outside the Router handling the routes.

   <div className='news-container'>
     <NavigationBar />
     <BrowserRouter>
       <Routes>
         ...
       </Routes>
     </BrowserRouter> 
   </div>
   

2. The NavigationBar is rendering another router as Routes so that is hiding the issue.

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

   Importing the BrowserRouter as Routes is an error/typo.

Solution

Move NavigationBar into the router so the links and routes all use the same routing context.

<BrowserRouter>
  <NavigationBar />
  <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>

Remove the extraneous router from NavigationBar.

import { NavLink } from "react-router-dom";

class NavigationBar extends React.Component {
  ...

  render () {
    return (
      <div className="navbar-container">
        <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>
      </div>
    );
  }
}