Setting Up TanStack Router in a React Application

This code demonstrates how to set up TanStack Router in a React application, initializing the router and defining the initial set of static routes.

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import React from 'react';
import ReactDOM from 'react-dom/client';
import Home from './components/Home';
import About from './components/About';

First, import necessary components from 'react-router-dom', the React library for DOM manipulation and the component files for Home and About pages.

const router = createBrowserRouter([
    { path: '/', element: <Home /> },
    { path: '/about', element: <About /> }
]);

Create a router using 'createBrowserRouter' by defining routes and corresponding components for the application.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <RouterProvider router={router} />
    </React.StrictMode>
);

Mount the router to the application's root DOM node, wrapping it in React's StrictMode for highlighting potential problems.