Initializing TanStack Router in a React Application

Demonstrate how to set up TanStack Router in a simple React application, including installation and basic router configuration to navigate between two pages.

import React from 'react';
import { createBrowserRouter, RouterProvider, Route } from '@tanstack/react-router-dom';

const Home = () => <div>Home Page</div>;
const About = () => <div>About Page</div>;

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

function App() {
  // RouterProvider is used to provide the routing context
  return <RouterProvider router={router} />;
}

export default App;

This code snippet initializes TanStack Router in a React application. It imports necessary components from '@tanstack/react-router-dom', defines two simple components for Home and About pages, sets up routes for these pages using `createBrowserRouter`, and uses `RouterProvider` to pass the router configuration to the React application.