Creating a link for navigation menu

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

function Home() {
  return(
    <>
      <nav>
        <NavLink to="/">Home</NavLink>
        <NavLink to="/about">About</NavLink>
        <NavLink to="/contact">Contact</NavLink>
      </nav>
      <h1>Welcome to our Website</h1>
    </>
  )
}

export  function About() {
  return(
    <>
        <nav>
        <NavLink to="/">Home</NavLink>
        <NavLink to="/about">About</NavLink>
        <NavLink to="/contact">Contact</NavLink>
      </nav>
    <h1>About our Website</h1>
    </>
  )
}

export  function Contact() {
  return(
    <>
        <nav>
        <NavLink to="/">Home</NavLink>
        <NavLink to="/about">About</NavLink>
        <NavLink to="/contact">Contact</NavLink>
      </nav>
    <h1>Contact us!</h1>
    </>
  )
}

export function App() {
  return(
    <>
      <Home />
    </>
  )
}

// To add submenu add a nested route like this:
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

import { App, About, Contact, History } from "./App";
import {BrowserRouter, Route, Routes} from "react-router-dom"
ReactDOM.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="/about" element={<About />} >
        <Route path="history" element={<History />} />
      </Route>
      <Route path="/contact" element={<Contact />} />
    </Routes>
  </BrowserRouter>,
  document.getElementById("root")
);
 and then use outlet on the component to call the child route