App.

js

import logo from './logo.svg';

import "./App.css";
import {BrowserRouter, Routes, Route} from "react-router-dom";
import Menu from './Components/Menu';
import Home from './Pages/AddUser/Home/Home';
import AddUser from './Pages/AddUser/AddUser';
import EditUser from './Pages/EditUser/EditUser';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
return (
<div className="">
<Menu/>
<BrowserRouter>

<Routes>
<Route path="/" element={<Home />} />
<Route path="add" element={<AddUser />} />
<Route path="edit" element={<EditUser />} />
</Routes>
</BrowserRouter>

</div>
);
}

export default App;

Menu.js

import Container from 'react-bootstrap/Container';

import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import './Menu/Menu.css';
function Menu()
{
return (<div>
<Navbar bg="primary" variant="dark" expand="lg">
<Container>
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
 <Nav.Link href="/">Home</Nav.Link>
</Nav>
</Navbar.Collapse>
<Nav>
<Nav.Link href="add" className='btn btn-outline-light addbtn'>ADD
USER</Nav.Link>

</Nav>
</Container>
</Navbar>
</div>);
}
export default Menu;

Menu.css

.addbtn
{
font-weight: bold!important;
color: #fff !important;
}

AddUser.js

function AddUser(){
return (<div>Add User</div>);
}
export default AddUser;

Home.js

function EditUser()
{
return (<div>Edit</div>);
}
export default EditUser;