fix(react-router): do not wrap children in outlet in suspense unless (default)pendingComponent is configured

[schiller-manuel]

No description provided.

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit bc81168. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

🟥 Failed Commands
nx affected --targets=test:eslint,test:unit,test:e2e,test:types,test:build,build --parallel=3

✅ Successfully ran 1 target

• nx run-many --target=build --exclude=examples/**

---

Sent with 💌 from NxCloud.

[pkg-pr-new]

commit: bc81168

@tanstack/history

pnpm add https://pkg.pr.new/@tanstack/history@2035

@tanstack/react-cross-context

pnpm add https://pkg.pr.new/@tanstack/react-cross-context@2035

@tanstack/react-router

pnpm add https://pkg.pr.new/@tanstack/react-router@2035

@tanstack/react-router-with-query

pnpm add https://pkg.pr.new/@tanstack/react-router-with-query@2035

@tanstack/router-arktype-adapter

pnpm add https://pkg.pr.new/@tanstack/router-arktype-adapter@2035

@tanstack/router-cli

pnpm add https://pkg.pr.new/@tanstack/router-cli@2035

@tanstack/router-devtools

pnpm add https://pkg.pr.new/@tanstack/router-devtools@2035

@tanstack/router-generator

pnpm add https://pkg.pr.new/@tanstack/router-generator@2035

@tanstack/router-plugin

pnpm add https://pkg.pr.new/@tanstack/router-plugin@2035

@tanstack/router-valibot-adapter

pnpm add https://pkg.pr.new/@tanstack/router-valibot-adapter@2035

@tanstack/router-vite-plugin

pnpm add https://pkg.pr.new/@tanstack/router-vite-plugin@2035

@tanstack/router-zod-adapter

pnpm add https://pkg.pr.new/@tanstack/router-zod-adapter@2035

@tanstack/start

pnpm add https://pkg.pr.new/@tanstack/start@2035

@tanstack/start-vite-plugin

pnpm add https://pkg.pr.new/@tanstack/start-vite-plugin@2035

Open in Stackblitz

More templates

• tanstack-router-react-example-authenticated-routes
• tanstack-router-react-example-basic
• tanstack-router-react-example-basic-default-search-params
• tanstack-router-react-example-basic-file-based
• tanstack-router-react-example-basic-file-based-codesplitting
• tanstack-router-react-example-react-query
• tanstack-router-react-example-basic-react-query-file-based
• tanstack-router-react-example-basic-ssr-file-based
• tanstack-router-react-example-basic-ssr-streaming-file-based
• tanstack-router-react-example-deferred-data
• tanstack-router-react-example-kitchen-sink
• tanstack-router-react-example-kitchen-sink-file-based
• tanstack-router-react-example-kitchen-sink-react-query
• tanstack-router-react-example-kitchen-sink-react-query-file-based
• tanstack-router-react-example-large-file-based
• tanstack-router-react-example-location-masking
• tanstack-router-react-example-navigation-blocking
• tanstack-router-react-example-quickstart
• tanstack-router-react-example-quickstart-file-based
• tanstack-router-react-example-quickstart-rspack-file-based
• tanstack-router-react-example-quickstart-webpack-file-based
• tanstack-router-react-example-scroll-restoration
• tanstack-router-search-validator-adapters
• tanstack-router-example-react-start-basic
• tanstack-router-example-react-start-basic-auth
• tanstack-router-example-react-start-basic-counter
• tanstack-router-example-react-start-basic-react-query
• tanstack-router-example-react-start-basic-rsc
• tanstack-router-example-react-start-clerk-basic
• tanstack-router-example-react-start-trello-trellaux
• tanstack-router-example-react-start-basic-trellaux
• tanstack-router-react-example-with-framer-motion
• tanstack-router-react-example-with-trpc
• tanstack-router-react-example-with-trpc-react-query

[schiller-manuel]

it maybe solves #2026

[SeanCassiere]

it maybe solves #2026

Whoops, my bad, linked the wrong issue.

[schiller-manuel]

@tannerlinsley please have a look if omitting this suspense is ok, check #2026 for the motivation.

one thing I dislike is that there is no way to opt out of suspense here if defaultPendingComponent is set.

[SeanCassiere]

one thing I dislike is that there is no way to opt out of suspense here if defaultPendingComponent is set.

This could be changed so that we don't use the defaultPendingComponent for the rootRoute and only rely on the rootRoute.pendingComponent. So if PendingComponent===undefined then just return nextMatch.

The only issue here is that this could be a breaking change for anyone currently relying on that default behaviour of not requiring a Suspense boundary above the RouterProvider.
We can ofc, get around this by introducing a future flag and stuff this new behaviour under that flag (and remove the old behaviour in v2).

[lukasgeiter]

Is there anything I can do to move this along?
Maybe we could merge the first commit which I would consider less of a breaking change?

[lukasgeiter]

@SeanCassiere @schiller-manuel @tannerlinsley Is there any chance of getting at least the first commit merged?
That would allow me to work around this bug without having to patch the package itself.

[dy0gu]

Any updates on getting this merged? We would really appreciate it, some workarounds are getting messy!

[LadyBluenotes]

Closing this since the issue was addressed in #5495