Add Router to A ViteJs + ReactJs + Typescript

Open GitBash if you are using Windows as I am to create the necessary folders from the root of the project

mkdir src/layout
mkdir src/pages
code src/main.tsx
code src/router.tsx
code src/layout/GuestLayout.tsx
code src/pages/Header.tsx
code src/pages/Footer.tsx
code src/pages/LandingPage.tsx
code src/pages/NotFound.tsx

Copy and paste the files included

main.tsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import router from "./router";
import { RouterProvider } from 'react-router-dom'
createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <RouterProvider router={router} />
  </StrictMode>,
)

router.tsx

import { createBrowserRouter, type RouteObject } from "react-router-dom";
import LandingPage from "./pages/LandingPage";
import NotFound from "./pages/NotFound";
import GuestLayout from "./layout/GuestLayout"; // Your main layout component
// Define your routes using the RouteObject type
const routes: RouteObject[] = [
    {
        path: "/",
        element: <GuestLayout />,
        errorElement: <NotFound />,
        children: [
            {
                index: true,
                element: <LandingPage />,
            },
        ],
    },
];
const router = createBrowserRouter(routes);
export default router;

src/layout/GuestLayout.tsx

import { Outlet } from "react-router-dom";
import Header from "../pages/Header";
import Footer from "../pages/Footer";
import React from "react";
const GuestLayout: React.FC = () => {
    return (
        <div className="GuestLayout">
            <Header />
            <main>
                <Outlet />
            </main>
            <Footer />
        </div>
    );
};
export default GuestLayout;

src/pages/Footer.tsx

import React from 'react';
const Footer: React.FC = () => {
    return (
        <h1 style={{ color: 'white', padding: '10px', backgroundColor: 'grey', width: '100%' }}>FOOTER</h1>
    )
};
export default Footer;

src/pages/Header.tsx

import React from 'react';
const Header: React.FC = () => {
    return (
        <h1 style={{ color: 'white', padding: '10px', backgroundColor: 'grey', width: '100%' }}>HEADER</h1>
    );
};
export default Header

src/pages/LandingPage.tsx

const LandingPage = () => {
  return (
    <div>
      <h1>Landing Page</h1>
    </div>
  );
};

export default LandingPage

src/pages/NotFound.tsx

import React from "react";
const NotFound: React.FC = () => {
    return (
        <div>
            <h1>Page Not Found</h1>
        </div>
    );
};
export default NotFound;
Simple - Typescript How To Add Router To React Application With Guestlayout