new·Earn with mozg — 20% of every monthSend somebody here and take a fifth of every plan payment they make, for as long as they keep paying — not a bounty on the first invoice. Your handle is the link, the window is thirty days, and the commission lands on your balance the second they pay. Free to join: if you have signed in, you already have the link. mozg.sh/earnall news →
mozg.beta
Sign in

React Router · Guides · all subjects

routing essentials

5 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

future.unstable_routePatternMatching flag configuration

Enable the `future.unstable_routePatternMatching` flag in Data Routers to use a new route matcher powered by @remix-run/route-pattern. Configuration example: const router = createBrowserRouter(routes, { future: { unstable_routePatternMatching: true } }); The flag is also available with createHashRouter and createMemoryRouter.

Route pattern matching specificity behavior change

The new route matcher with unstable_routePatternMatching ranks ambiguous matches by positional specificity instead of aggregate segment scores. A route with a longer static prefix can rank above a route with more dynamic segments. For example, with routes [{ path: "/products/*" }, { path: "/:first/:second/:third/:fourth" }], the new matcher selects /products/* when matching /products/one/two/three because its static 'products' segment is more specific than the dynamic ':first' segment in the same position.

Review overlapping route patterns when enabling unstable_routePatternMatching

When enabling the unstable_routePatternMatching flag, review any routes with overlapping patterns to ensure the new ranking behavior selects the intended route. Issues are mostly expected when you have deep dynamic param paths that could result in an aggregate score that outweighs a shallower static segment route.

Using router.match() with unstable_routePatternMatching

When the unstable_routePatternMatching flag is enabled, use router.match() when you need to match a location. This API is currently marked private and will become stable at the same time this flag stabilizes. Standalone matching APIs such as matchRoutes, matchPath, and useMatch continue to use the legacy matcher and may return different matches than the router.

Case-sensitive routes limitation with unstable_routePatternMatching

Case-sensitive routes are not currently supported with the unstable_routePatternMatching flag.

Give your agent this brain