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