Implementing Custom Search Param Parsers with TanStack Router

Provide an example of how to implement custom search param parsers and serializers for complex query parameters management, enhancing the flexibility in handling URL search params in TanStack Router.

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

function customSerializer(params) {
  // Serialize object into string
  return btoa(JSON.stringify(params));
}

function customParser(paramString) {
  // Parse string back into object
  return JSON.parse(atob(paramString));
}

let router = createBrowserRouter([
  {
    path: 'search',
    element: <SearchPage />, // Assuming SearchPage is a component that uses useSearchParams
    loader: async ({ request, params }) => {
      const url = new URL(request.url);
      // Use the custom parser for complex query parameters
      const query = customParser(url.searchParams.get('customQuery'));
      return { query };
    }
  }
]);

This code demonstrates how to implement custom search param parsers and serializers within TanStack Router. It uses two functions, customSerializer and customParser, to handle the serialization and parsing of complex query parameters, respectively. The 'customParser' is used within a route loader function to parse query parameters into a usable object for the component.