Configuring Basic Masked Routes with TanStack Router

Showcase the configuration of basic masked routes using TanStack Router, explaining how to define friendly URL paths that mask complex underlying route structures.

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

// Define your route objects
const router = createBrowserRouter([
  {
    path: 'profile/:userId',
    element: '<UserProfile />',
    // Masking the complex underlying path structure
    loader: async () => ({
      userId: 'masked-userId',
      additionalData: 'Data for masked route'
    }),
  }
]);

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

This code snippet demonstrates how to configure a basic masked route using TanStack Router. The route uses a friendly URL path 'profile/:userId' that masks a more complex structure perhaps intended by the loader function. The loader function simulates fetching or preparing additional data based on the path param 'userId', masking the complexity from the end URL.