Implementing Router in a React

React Router is a standard library for routing in React. It enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL.

1. npm i react-router-dom

import "./App.css";
import { Home } from "./pages/Home";
import { Profile } from "./pages/Profile";
import { Contact } from "./pages/Contact";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link
} from "react-router-dom";

function App() {
  
  return (
    <Router>
    <div className="App">
    <ul >
    <li>
        <Link to="/">Home</Link>
    </li>
    <li>
        <Link to="/Profile">
            About Us
        </Link>
    </li>
    <li>
        <Link to="/Contact">
            Contact Us
        </Link>
    </li>
</ul>
        <Routes>
            <Route
                exact
                path="/"
                element={<Home />}
            ></Route>
            <Route
                exact
                path="/Profile"
                element={<Profile />}
            ></Route>
            <Route
                exact
                path="/Contact"
                element={<Contact />}
            ></Route>
        </Routes>
    </div>
</Router>
  );
}

export default App;

Output