Follow these simple steps to add router capabilities. Simple create these files after the installation. This assumes you are starting an aplication brand new without previous routers installed so is a fresh installation that you are going to be using. you can probbaly make it to replace an exisiting but for the purpose of this tutorial, we are starting fresh install. This example is using jsx so you may have to adapt to typescript aswell. Checkout the Typescript Version of this tutorial. I am also using ViteJs for this project.

1. Install router

$ npm install -D react-router-dom

2. In src/main.jsx be sure to add the RouterProvider from React Router. If you have <App>, You may have to remove it and place the App component in the router as the default. For example, it may look like this:

[src/main.jsx]

import router from "./router.jsx";
ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
      <RouterProvider router={router} />
  </React.StrictMode>
);

3. Create a router.js file to create the router object where we will create the routes. Add the following routes in the router.js file

[src/router.js]

import { createBrowserRouter, Navigate } from "react-router-dom";
import App from "./App.jsx";
import NotFound from "./NotFound.jsx";
import About from "./pages/About.jsx";
import User from "./pages/User.jsx";
import GuestLayout from "./layout/GuestLayout";
const router = createBrowserRouter([
    { path: '/', element: <App /> },
    {
        path: '/',
        element: <GuestLayout />,
        element: <Navigate to="/login" />, // force to home if not logged in
        children: [
            { path: '/about', element: <About /> },
            { path: '/user/:id', element: <User /> }, // Add Parameters
        ]
    },
    {
        path: "*",
        element: <NotFound /> // Show Not Found Page for any other
    }
]);
export default router;

4. Now create the layout file called GuestLayout

[layout/GuestLayout.jsx]

import { Outlet } from "react-router-dom";
import Header from "./pages/Header";
import Footer from "./pages/Footer";
export default function GuestLayout() {
  return (

      <div className="content">
        <Header />
        <main>
          <Outlet />
        </main>
        <Footer />
      </div>
  );
}

5. Now give it a try by opening the pages with your browser. For example: http://localhost:5173/about

 Example Source: F:\apachefriends\xampp\htdocs\websor\tools\primereact\Sakai-Template-MyVersion-With-ViteJs\tools-websor\src

Simple - Typescript How To Add Router To React Application With Guestlayout