React navbar not displaying after refresh with reactstrap - what's wrong?

Question

needing serious help.

I'm trying to get my Navbar to show, but somehow is not working.

These are my current files:

import "./components/App.css"
import Navbar from "./components/Navbar";
import { Routes, Route } from "react-router-dom";
import Home from "./components/Pages/Home"
import About from "./components/Pages/About"


function App() {
  return(
    <>
    <Navbar />
    <div className="container">
      <Routes>
        <Route path="/" element={<Home/>} />
        <Route path="/" element={<About/>} />

      </Routes>
    </div>
    </>
  )
}
export default App;

import React from "react";

export const Home = () => {
  return (
    <div>
      <h1>Home</h1>
    </div>
  );
};

export default Home;

import React, { useState } from "react";
import  { Collapse, Nav, NavbarBrand, NavbarToggler, NavLink, NavItem } from 'reactstrap';

function Navbar() {
  const [click, setClick] = useState(false);

  const handleClick = () => setClick(!click);
  return (
    <div>
     <Navbar color= 'light' light expand ='md'>
     <NavbarBrand href= "/">react</NavbarBrand>

     <NavbarToggler onClick={this.toggle} />
     <Collapse isOpen={this.state.isOpen} navbar>
      <Nav className="m1-auto" navbar>
        <NavItem>
        <NavLink
                exact
                to="/about"
                activeClassName="active"
                className="nav-links"
                onClick={handleClick}
              >
                About
              </NavLink>
        </NavItem>

      </Nav>
     </Collapse>

     </Navbar>
    </div>
  )

}
export default Navbar;

I’m expecting the navbar to show but every time I refresh, it won't load. So I'm not too sure of the reason for the error.

Why isn’t my navbar rendering after refresh?