Skip to content

[AppProvider] Add Tanstack React Router provider#4971

Merged
apedroferreira merged 35 commits intomui:masterfrom
apedroferreira:add-tanstack-router-provider
May 30, 2025
Merged

[AppProvider] Add Tanstack React Router provider#4971
apedroferreira merged 35 commits intomui:masterfrom
apedroferreira:add-tanstack-router-provider

Conversation

@apedroferreira
Copy link
Collaborator

@apedroferreira apedroferreira commented May 22, 2025

@apedroferreira apedroferreira self-assigned this May 22, 2025
@apedroferreira apedroferreira added scope: toolpad-core Abbreviated to "core" type: new feature Expand the scope of the product to solve a new problem. labels May 22, 2025
@mui-bot
Copy link

mui-bot commented May 22, 2025

Netlify deploy preview

https://deploy-preview-4971--mui-toolpad-docs.netlify.app/

Generated by 🚫 dangerJS against bb84f78

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label May 28, 2025
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label May 28, 2025
@apedroferreira apedroferreira marked this pull request as ready for review May 29, 2025 00:10
@apedroferreira apedroferreira requested a review from a team May 29, 2025 00:11
/** @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"],' : ''}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's the reason? I believe latest versions should just work untranspiled.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh that's right, I've fixed it now.

const { _splat } = useParams({ strict: false });

const title = React.useMemo(() => {
if (pathname.endsWith('/orders/new')) {
Copy link
Member

@Janpot Janpot May 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label May 29, 2025
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label May 29, 2025
@apedroferreira apedroferreira requested a review from Janpot May 29, 2025 22:26
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label May 30, 2025
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label May 30, 2025
@apedroferreira apedroferreira merged commit 47bd4e7 into mui:master May 30, 2025
15 checks passed
@apedroferreira apedroferreira deleted the add-tanstack-router-provider branch May 30, 2025 14:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

scope: toolpad-core Abbreviated to "core" type: new feature Expand the scope of the product to solve a new problem.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add tanstack/react-router support. TanstackRouterAppProvider

3 participants