Help with react router

[Cody_Biggs]

The react course I am going through with udemy seems to be outdated when it comes to Routes. I have searched on Stack overflow and other places, but I am not sure why it is not working. The console does not show any errors with the routes

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter} from "react-router-dom";


ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);
reportWebVitals();

App

import React, {Component} from "react";
import './index.css';
import Navigation from "./Navigation";
import {Route, Routes} from "react-router-dom"
import Planets from './Planets';
import Earth from './Earth';

class App extends Component{
    render(){
        return(
            <div className="App">
                <Navigation />
                <Planets planetName="Mercury" rotation="58.6 Days" revolution="87.97 Days" radius="2,439.7 KM" temperature="430°c"/>

                <Routes>
                    <Route exact path="/earth" element={<Earth />} />
                </Routes>
            </div>
        )
    }
}
export default App;

Navigation

import React, {Component} from "react";
import './index.css';
import {NavLink} from "react-router-dom"

class Navigation extends Component{
    constructor(props){
        super(props);
    }
    render(){
        return(
            <div>
   <nav class="navbar navbar-expand-lg navbar-dark">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon "></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
      <a class="navbar-brand justify-content-end" href="#">Hidden brand</a>
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <NavLink class="nav-link active" aria-current="page" to="#">Home</NavLink>
        </li>
        <li class="nav-item">
          <NavLink class="nav-link" to="/earth">Earth</NavLink>
        </li>
        <li class="nav-item">
          <NavLink class="nav-link" to="#">Disabled</NavLink>
        </li>
      </ul>
    </div>
  </div>
</nav>
</div>
        )
    }
}

export default Navigation;

Earth

import React, {Component} from "react";
import './index.css';
import Navigation from "./Navigation";

class Earth extends Component{
    render(){
        return(
            <div>
                <h1>Routed to the Earth.js Page</h1>
            </div>
        )
    }
}
export default Earth;

EDIT: I see Earth is just rendering to the bottom of the current component. Not sure why

EDIT 2: Never mind, I saw that I was still rendering the first component above the routes instead of adding that component to the routes as well