Add router abstraction and TanStack Router adapter

[fzaninotto]

Problem

React-admin is tied to react-router. But the two main frameworks used to build new apps today are Next.js and TanStack Start, both NOT using react-router. Although it's possible to integrate RA with Next.js (by opting out of SSR and using a HashRouter), it's cumbersome. It's impossible to do it with TanStack Start.

Solution

Add a routing abstraction layer to allow react-admin to use another router.

Add a TanStack Router implementation to check that the abstraction works for at least 2 routers.

import { Admin, Resource, ListGuesser, tanStackRouterProvider } from 'react-admin';
import { dataProvider } from './dataProvider';

const App = () => (
    <Admin
        dataProvider={dataProvider}
        routerProvider={tanStackRouterProvider}
    >
        <Resource name="posts" list={ListGuesser} />
        <Resource name="comments" list={ListGuesser} />
    </Admin>
);

export default App;

How To Test

React-admin should use react-router by default, and nothing should be broken. The demo apps should work as before.

A demo app powered by TanStack Router was added:

http://localhost:9010/?path=/story/react-admin-frameworks-tanstack--full-app

It contains CRUD routes and custom routes, as well as sub-routes (TabbedForm) and blocker (useWarnWhenUnsavedChanges). All routing features should work, and are covered by integration tests.

The same demo app can be tested in a second story, where it's embedded into an existing TanStack router app:

http://localhost:9010/?path=/story/react-admin-frameworks-tanstack--embedded

In this case, react-admin doesn't create a router but adds its own routes.

Note: these stories don't reset their route properly, so navigating from one to the other will fail. Refresh the browser when opening one of TanStack router's stories.

Reviewing this PR

This is a large PR, so I rebased the history to allow reviewers to read it commit-by-commit.

The tests should pass at the end of each commit.

Additional Checks

• The PR targets master for a bugfix or a documentation fix, or next for a feature
• The PR includes unit tests (if not possible, describe why)
• The PR includes one or several stories (if not possible, describe why)
• The documentation is up to date

[djhi]

Awesome work 💪

• react-admin still has a dependency on react-router so users that want TanStack Router will have both routers installed. This is probably a breaking change for some people though.
• TanStack router stories conflict with each other. If you navigate from some deep link in one to another story, you may end up with an empty screen.
• We should probably split tan stack related code in multiple files, only re-export the provider from ra-core and make the rest available under a sub-path export (https://github.com/colinhacks/zshy/?tab=readme-ov-file#2-specify-your-entrypoints-in-packagejsonzshy)

[djhi]

We could have a sub-export path to make this more natural: import { Route } from 'ra-core/tanstack';

[djhi]

The next chapters are react-router specific and will probably make users wonder how thy apply when using TanStack Router. Maybe we should introduce a ReactRouter page.

[djhi]

How does one setup their routes accordingly?

[djhi]

Same

[djhi]

A real create would be better here, it feels buggy otherwise