Client Side Routing - Render new UI without server request 
    
Single page applications (SPAs) - Only one page updated constantly 

Structure of URL
https://website.com/articles?search=node

https - Protocol 
website.com - Domain 
/articles - Path 
?search=node - Query 

npm i react-router-dom

Using BrowserRouter instead:
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Routes, Route } from "react-router-dom" 

function App() {
  return (
    <h1>Hello, React Router!</h1>
  )
}

function About() {
  return (
    <h1>About page</h1>
  )
}

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="/about" element={<About />} />
    </Routes>
  </BrowserRouter>
);

Using createBrowserRouter:
import * as React from "react";
import * as ReactDOM from "react-dom";
import { createBrowserRouter, RouterProvider } from "react-router-dom"; 

import Root, { rootLoader } from "./routes/root";
import Team, { teamLoader } from "./routes/team";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    loader: rootLoader,
    children: [
      {
        path: "team",
        element: <Team />,
        loader: teamLoader,
      },
    ],
  },
]

/* These two can also be used */
<Route path="/" element={<App />} />
<Route path="/about" element={<About />} /> 

);

ReactDOM.createRoot(document.getElementById("root")).render(
  <RouterProvider router={router} />
);