Add tanstack/react-router support. TanstackRouterAppProvider

[nick-kang]

Summary

Add TanstackRouterAppProvider similar to the react-router one.

Here is a sample implementation based off the react-router implementation. It's working on my app.

// TanstackRouterAppProvider.tsx

import { useLocation, useNavigate, useSearch } from "@tanstack/react-router";
import { AppProvider, type AppProviderProps, Navigate, Router } from "@toolpad/core";
import { useCallback, useMemo } from "react";

export function TanstackRouterAppProvider({ children, ...rest }: AppProviderProps): React.JSX.Element {
  const { pathname } = useLocation();
  const searchParams = useSearch({ strict: false });
  const navigate = useNavigate();

  const navigateImpl = useCallback<Navigate>(
    (url, { history = "auto" } = {}) => {
      if (history === "auto" || history === "push") {
        navigate({ to: url.toString() }).catch(console.error);
      } else if (history === "replace") {
        navigate({
          to: url.toString(),
          replace: true
        }).catch(console.error);
      } else {
        throw new Error(`Unknown history option: ${history}`);
      }
    },
    [navigate]
  );

  const routerImpl = useMemo<Router>(
    () => ({
      pathname,
      searchParams: new URLSearchParams(searchParams),
      navigate: navigateImpl
    }),
    [
      pathname,
      searchParams,
      navigateImpl
    ]
  );

  return (
    <AppProvider router={routerImpl} {...rest}>
      {children}
    </AppProvider>);
}

Examples

No response

Motivation

No response

Search keywords: tanstack/react-router tanstack/router router tanstack

[Janpot]

I believe we could start with an example. We'd probably like to let the router adapter interface mature a bit before promoting it to an actual AppProvider. There are some changes planned to fix basepath issues in the current implementations.