This version is for Typescript. The previous version was not using typescript. For this example I am using the same environment: ViteJs, React, React Router

This code serves as the main entry point for a React application, orchestrating the initial rendering process and setting up essential providers for routing and UI components. It performs the following key functions:

  • StrictMode: Wraps the application in React’s StrictMode, a development tool that helps identify potential issues such as unsafe lifecycle methods, deprecated APIs, and unexpected side effects. This ensures better code quality and future-proofing.

  • createRoot: Uses React’s modern createRoot API from react-dom/client to enable concurrent rendering. This replaces the older ReactDOM.render method and improves performance and responsiveness.

  • RouterProvider: Integrates React Router into the application by injecting the routing configuration defined in router.tsx. This enables client-side navigation between different views or pages without full page reloads.

  • PrimeReactProvider: Sets up PrimeReact’s context provider, allowing the use of its rich set of UI components (like buttons, tables, dialogs) throughout the app. This ensures consistent styling and behavior across the interface.

  • : Loads global styles that apply to the entire application, including resets, layout rules, and custom themes.

Together, this setup creates a robust foundation for a scalable React application with modern routing, UI component support, and development safeguards. It’s a clean and modular structure that promotes maintainability and rapid development.

[main.tsx]

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import { RouterProvider } from "react-router-dom";
import router from "./router.tsx";

import { PrimeReactProvider } from "primereact/api";

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

[router.tsx]

Sets up a browser-based router with a layout component (GuestLayout) and nested routes for different pages (BlogPage, About, and NotFound).

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

[layout/GuestLayout.tsx]

This code defines a layout component called GuestLayout for a React application using React Router

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="content">
      <Header />
      <main>
        <Outlet />
      </main>
      <Footer />
    </div>
  );
};
export default GuestLayout;

[pages/NotFound.tsx]

import React from "react";
import { useRouteError } from "react-router-dom";
const NotFound: React.FC = () => {
  const error = useRouteError();
  console.error(error);
  return (
    <div>
      <h1>Oops!</h1>
      <p>Sorry, an unexpected error has occurred.</p>
      <p>
        <i>{(error as any).statusText || (error as Error).message}</i>
      </p>
    </div>
  );
};
export default NotFound;

[packages.json]

  "dependencies": {
    "primereact": "^10.9.7",
    "react": "^19.1.1",
    "react-dom": "^19.1.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.35.0",
    "@types/react": "^19.1.13",
    "@types/react-dom": "^19.1.9",
    "@types/react-router-dom": "^5.3.3",
    "@vitejs/plugin-basic-ssl": "^2.1.0",
    "@vitejs/plugin-react": "^5.0.2",
    "axios": "^1.12.2",
    "chart.js": "^4.5.0",
    "eslint": "^9.35.0",
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.20",
    "globals": "^16.4.0",
    "primeflex": "^4.0.0",
    "primeicons": "^7.0.0",
    "react-router-dom": "^7.9.1",
    "typescript": "~5.8.3",
    "typescript-eslint": "^8.43.0",
    "vite": "^7.1.6"
  }

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

Simple - How To Add Router To React Application With Guesslayout