[AppProvider] Add Tanstack React Router provider#4971
[AppProvider] Add Tanstack React Router provider#4971apedroferreira merged 35 commits intomui:masterfrom apedroferreira:add-tanstack-router-provider
Conversation
Netlify deploy preview |
packages/toolpad-core/src/tanstack-router/TanstackReactRouterAppProvider.tsx
Outdated
Show resolved
Hide resolved
| /** @type {import('next').NextConfig} */ | ||
| const nextConfig = { | ||
| ${options.router === 'nextjs-pages' ? 'transpilePackages: ["next-auth"],' : ''} | ||
| ${options.router === 'nextjs-pages' ? 'transpilePackages: ["next-auth", "@mui/x-data-grid", "@mui/x-data-grid-pro", "@mui/x-data-grid-premium"],' : ''} |
There was a problem hiding this comment.
What's the reason? I believe latest versions should just work untranspiled.
There was a problem hiding this comment.
Oh that's right, I've fixed it now.
| const { _splat } = useParams({ strict: false }); | ||
|
|
||
| const title = React.useMemo(() => { | ||
| if (pathname.endsWith('/orders/new')) { |
There was a problem hiding this comment.
Crafting the title in this place feels like a leaky abstraction. Using endsWith to compare routes feel very wrong to me.
Do we need to make it possible for the title property in the navigation structure to be a function that returns a string or something?
title: ({ params }) => {
if (params.orderId === 'new') return 'new Order';
if (typeof params.orderId === 'number') return `Order ${orderId}`
return null; // default
}And in case of Crud, is there a way in which the Crud component could take care of this automatically? Or any other nice way to automate this.
There was a problem hiding this comment.
You're right, we could definitely tackle this more elegantly and the way the CRUD integrates with the PageContainer and its title and even the breadcrumbs aren't ideal right now... I'll try to find a better solution for all of this in a separate PR.
Closes #4629
Examples must be added in separate PR, to merge after this feature is released. (#4979)
https://deploy-preview-4971--mui-toolpad-docs.netlify.app/toolpad/core/react-app-provider/#other-integrations
https://deploy-preview-4971--mui-toolpad-docs.netlify.app/toolpad/core/integrations/tanstack-router/