Defining Static Routes in TanStack Router

Show how to define static routes in TanStack Router, directly mapping a path to a component.

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

First, import necessary components from the react-router-dom package.

import Home from './components/Home';
import About from './components/About';

Import the components that will be used for the corresponding routes.

const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />,
    // This route maps the path '/' to the Home component
  },
  {
    path: '/about',
    element: <About />,
    // This route maps the path '/about' to the About component
  }
]);

Create the router instance and define the routes. Each route maps a path to a component.

function App() {
  return <RouterProvider router={router} />;
}

Define the App component. Use RouterProvider to pass the router configuration to your app.

export default App;

Export the App component to be used in the main entry file of the application.