Implementing Hash-Based Routing

Showcase creating hash-based routing with TanStack Router, highlighting how to handle routes and navigate using hashes in the URL for legacy browser support.

import { createHashRouter, RouterProvider } from 'tanstack-router';

Imports createHashRouter for hash-based routing and RouterProvider to provide routing context.

const router = createHashRouter([
  {
    path: '/',
    element: '<HomePage />',
    children: [
      { path: 'about', element: '<AboutPage />' },
      { path: 'contact', element: '<ContactPage />' }
    ]
  }
]);

Defines a hash-based router instance with nested routes. The root path '/' has two children 'about' and 'contact' which correspond to different components.

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

Wraps the application in RouterProvider and passes the configured router to manage the routes.

export default App;

Exports the App component that includes the hash-based routing setup.