Converting Static Routes from React Router to TanStack Router

Showcase the conversion of basic static routes, highlighting the syntax changes and structure adjustment needed when transitioning from React Router to TanStack Router.

// React Router v6
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

This is how you define static routes using React Router v6. A browser router wraps the Routes element, which in turn contains Route elements specifying paths and components.

// TanStack Router v1
import { createBrowserRouter, RouterProvider, Route } from 'tanstack-router';
import Home from './Home';
import About from './About';

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

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

This is the converted example using TanStack Router v1. Routes are defined as an array of route objects, each specifying a path and an element. A `RouterProvider` component is used to wrap the application in the routing context with the created router.