Simple React Components Not Rendering – Reactjs

I’ve seen this question asked a few times and none of the solutions I have found are relevant or working, so I’ll start with what I have tried.

• Yes, my component names are all starting with capital letters.

• Yes, I have ensured that my spelling is correct for the component names and where they are referenced / called.

• Yes, I have restarted my localhost.

Now that that’s out of the way, I have no idea why my react components are not rendering. Router, and Header files are rendering, but not the other components (specifically links).

Here is my AppRouter.js file:

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Header from '../components/Header';
import AddGame from '../components/AddGame';
import GameList from '../components/GameList';
import '../styles.scss';
import useLocalStorage from '../hooks/useLocalStorage';

const AppRouter = () => {

  const [games, setGames] = useLocalStorage('games', [])
  
  return (
    <BrowserRouter>
      <div>
        <Header />
        <div className="main-content">
          <Routes>
            <Route component={GameList} path="/" exact={true} />
            <Route
  render={(props) => (
    <AddGame {...props} games={games} setGames={setGames} />
  )}
  path="/add"
/>
          </Routes>
        </div>
      </div>
    </BrowserRouter>
  );
};

export default AppRouter;

Here is my index.js file:

import React from 'react';
import ReactDOM from 'react-dom';
import AppRouter from './router/AppRouter';
import 'bootstrap/dist/css/bootstrap.min.css';
import './styles.scss';

ReactDOM.render(<AppRouter />, document.getElementById('root'));```

And here is one of my components that will not render:

import React from 'react';


const GameList = () => {
  return (
  <h2>List Of Games</h2>  
  );
};

export default GameList;

I’m not sure what’s going on, because like I mentioned, the header file will render. Here is the header file:

import React from 'react'
import {NavLink} from 'react-router-dom'


const Header = () => 
{
    return (
        <header>
            <h1>Game Collection Manager</h1>
            <hr/>
            <div className="links">
            <NavLink to ="/" className="link" activeClassName="active" exact>
                Games List
                </NavLink>
                <NavLink to ="/add" className="link" activeClassName="active">
                Add A Game
                </NavLink>
                </div>
        </header>
    );
};

export default Header;

No idea what’s going on, it seems pretty straight forward but just won’t render. Any ideas? Thank you in advance.