Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add routes prop to HydratedRouter #11693

Closed
wants to merge 5 commits into from

Conversation

brophdawg11
Copy link
Contributor

@brophdawg11 brophdawg11 commented Jun 20, 2024

Replaces remix-run/remix#9062 against v7

Allows you to provide client-side only routes to <HydratedRouter> to ease the migration from a v6 RouterProvider SPA to the Vite plugin SPA Mode

Copy link

changeset-bot bot commented Jun 20, 2024

🦋 Changeset detected

Latest commit: 5a1aefa

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages
Name Type
react-router Major
react-router-dom Major
@react-router/dev Major
@react-router/express Major
@react-router/node Major
@react-router/serve Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

} catch (e) {
propRoutesError = e;
}
}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

First, add the prop.routes to our routes generated from the manifest before we create the router

@@ -39,7 +39,7 @@ export interface EntryRoute extends Route {
hasErrorBoundary: boolean;
imports?: string[];
css?: string[];
module: string;
module?: string; // Undefined for <HydratedRouter routes>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This needs to be optional for routes coming from <HydratedRouter routes> so had to make some other minor changes to existing code to account for that

@brophdawg11 brophdawg11 force-pushed the brophdawg11/hydrated-router-routes branch from a746f7a to 466a58c Compare June 28, 2024 14:58
Comment on lines +269 to +274
if (ssrInfo && propRoutes) {
let rootDataRoute = router.routes[0];
for (let route of rootDataRoute.children || []) {
addPropRoutesToRemix(ssrInfo, route as DataRouteObject, rootDataRoute.id);
}
}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Add the new routes to the Remix manifest/routeModules structures as if they came from the server - they just won't have a route.module

if (matchedPropRoute) {
for (let [routeId, error] of Object.entries(hydrationData.errors)) {
if (isRouteErrorResponse(error) && error.status === 404) {
delete hydrationData.errors[routeId];
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Wipe out any SSR'd 404s if we now match our new client routes - we will have a hydration error/flicker but it will recover with the client render

@brophdawg11 brophdawg11 linked an issue Jun 28, 2024 that may be closed by this pull request
@brophdawg11 brophdawg11 added the v7 label Jun 28, 2024
@brophdawg11
Copy link
Contributor Author

No longer needed #11652 (comment)

@brophdawg11 brophdawg11 closed this Jul 2, 2024
@brophdawg11 brophdawg11 deleted the brophdawg11/hydrated-router-routes branch July 2, 2024 21:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

<HydratedRouter routes> prop
1 participant