Skip to content

Commit 42aa82c

Browse files
committed
Add support for AbsoluteRoutes/useAbsoluteRoutes
1 parent a7ab88a commit 42aa82c

File tree

7 files changed

+483
-2
lines changed

7 files changed

+483
-2
lines changed

.changeset/silly-worms-sleep.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"react-router": minor
3+
---
4+
5+
Implement `<AbsoluteRoutes>`/`useAbsoluteRoutes` as alternatiuves to `<Routes>`/`useRoutes` when using absolute paths is required. This is primarily intended to be used to ease migrations from v5 applications where this was a common pattern. It's also useful for descendant routes when you want to manage your paths in an external data structure.

docs/api/components/AbsoluteRoutes.md

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
---
2+
title: AbsoluteRoutes
3+
---
4+
5+
# AbsoluteRoutes
6+
7+
[MODES: framework, data, declarative]
8+
9+
## Summary
10+
11+
[Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.AbsoluteRoutes.html)
12+
13+
An alternate version of [<Routes>](./Routes) that expects absolute paths on routes instead of relative paths. This is mostly intended to be used as a tool to help migrate from v5 where absolute paths were a common pattern, or for when you want to define your paths in a separate data structure using absolute paths.
14+
15+
```tsx
16+
import { AbsoluteRoutes, Route } from "react-router";
17+
18+
<AbsoluteRoutes>
19+
<Route path="/dashboard/*" element={<Dashboard />} />
20+
</AbsoluteRoutes>;
21+
22+
function Dashboard() {
23+
return (
24+
<AbsoluteRoutes>
25+
<Route
26+
path="/dashboard/settings"
27+
element={<Settings />}
28+
/>
29+
<Route path="/dashboard/users" element={<Users />} />
30+
</AbsoluteRoutes>
31+
);
32+
}
33+
```
34+
35+
## Props
36+
37+
### children
38+
39+
[modes: framework, data, declarative]
40+
41+
Nested [Route](../components/Route) elements
42+
43+
### location
44+
45+
[modes: framework, data, declarative]
46+
47+
The location to match against. Defaults to the current location.

docs/api/hooks/useAbsoluteRoutes.md

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
---
2+
title: useAbsoluteRoutes
3+
---
4+
5+
# useAbsoluteRoutes
6+
7+
[MODES: framework, data, declarative]
8+
9+
## Summary
10+
11+
[Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.useAbsoluteRoutes.html)
12+
13+
An alternate version of [useRoutes](./useRoutes) that expects absolute paths on routes instead of relative paths. This is mostly intended to be used as a tool to help migrate from v5 where absolute paths were a common pattern, or for when you want to define your paths in a separate data structure using absolute paths.
14+
15+
The return value of `useAbsoluteRoutes` is either a valid React element you can use to render the route tree, or `null` if nothing matched.
16+
17+
```tsx
18+
import * as React from "react";
19+
import { useAbsoluteRoutes } from "react-router";
20+
21+
const routes = {
22+
dashboard: {
23+
path: "/dashboard",
24+
href: () => `/dashboard`,
25+
},
26+
dashboardMessages: {
27+
path: "/dashboard/messages",
28+
href: () => `/dashboard/messages`,
29+
},
30+
dashboardMessage: {
31+
path: "/dashboard/:id",
32+
href: (id: number) => `/dashboard/${id}`,
33+
},
34+
};
35+
36+
function App() {
37+
let element = useAbsoluteRoutes([
38+
{
39+
path: routes.dashboard.path,
40+
element: <Dashboard />,
41+
children: [
42+
{
43+
path: routes.dashboardMessages.path,
44+
element: <DashboardMessages />,
45+
children: [
46+
{
47+
path: routes.dashboardMessage.path,
48+
element: <DashboardMessage />,
49+
},
50+
],
51+
},
52+
],
53+
},
54+
]);
55+
56+
return element;
57+
}
58+
```
59+
60+
## Signature
61+
62+
```tsx
63+
useAbsoluteRoutes(routes, locationArg): undefined
64+
```
65+
66+
## Params
67+
68+
### routes
69+
70+
[modes: framework, data, declarative]
71+
72+
Your routes to use to render this location
73+
74+
### locationArg
75+
76+
[modes: framework, data, declarative]
77+
78+
The location to render instead of the current location

0 commit comments

Comments
 (0)