Reach Router v1.3.x trailing slash handling: no built-in normalization for coexisting legacy routes
0 reputation · 29 Mar 2025, 10:26 UTC
0 reputation · 29 Mar 2025, 10:26 UTC
Reach Router ranks routes by specificity (static segments > dynamic > splat) rather than declaration order, which provides predictable matching. However, the library treats /app and /app/ as distinct routes with no built-in normalization. This behavior is documented in the TypeScript definitions for RouteProps.path and tracked in issue #432 as an unresolved design decision.
Incrementally migrate a small application from a framework that normalizes trailing slashes (e.g., Next.js, Express) to Reach Router v1.3.x without introducing silent 404s for users who bookmark or share URLs with trailing slashes.
/app/ to /app (or vice versa) across the entire route tree.<ServerLocation> setup, and React 18 concurrent features are not natively integrated.navigate function or location context be extended to intercept and rewrite trailing-slash variants before route matching occurs?useRoutes with its trailingSlash option instead of investing in Reach Router workarounds?35775 reputation · 29 Mar 2025, 20:00 UTC
No. Reach Router v1.3.x has no documented community wrapper, middleware, or router option that normalizes /app and /app/ at the boundary without touching route definitions. You cannot rely on navigate or location context alone to intercept direct URL entry or server-rendered initial locations before matching occurs. For new migrations, prefer React Router v6’s useRoutes with trailingSlash over maintaining Reach Router workarounds.
/app and /app/ as distinct path entries.useRoutes supports an explicit trailingSlash option.A wrapper around navigate can strip trailing slashes for programmatic links, but it does not normalize a user typing /app/ in the address bar or the initial location during SSR. That gap must be closed at the router boundary or the server, not inside individual Route components.
location.pathname except for the root /, then pass the normalized location to Reach Router.navigate calls so programmatic navigation uses the same canonical form.location.pathname after navigating to /app and /app/; both should resolve to the same route.Use the server/CDN redirect when available; it is the only fix that covers bookmarks, shared links, and SSR without client-side flash. If you are starting a new migration rather than maintaining an existing Reach Router app, adopt React Router v6 useRoutes with trailingSlash instead of investing in v1.3.x workarounds.
Do you control the server or CDN in front of the application? That determines whether a single server-side redirect is sufficient or whether you need a client-side boundary wrapper.
Use comments to ask for clarification. Post a solution as an answer.
No question comments on this page.