React Location Elements To Routes

The react-location-elements-to-routes package exports:

• A Route component
• An elementsToRoutes function

Route

The Route component can be used to create a JSX representation of a Route object you would normally use to configure your routes in react-location

• Route.children is of type React.ReactNode instead of the usual Route[].
• Only <Route> and <React.Fragment>/<></> elements may be used
• Ternary logic is supported
• The <Route> component is merely a placeholder component that simply renders null, so don't try to use it 😜.

Use the Route component and elementsToRoutes function like so:

1 import {
2   Route,
3   elementsToRoutes,
4 } from '@tanstack/react-location-elements-to-routes'
5 
6 const routes = elementsToRoutes(
7   <Route path="admin" element={<Admin />}>
8     <Route path="dashboard" element={<Dashboard />} />
9     <Route
10       path="users"
11       element={<Users />}
12       loader={async () => {
13         return {
14           users: await fetchUsers(),
15         }
16       }}
17     />
18     <Route path="settings" element={<Settings />} />
19   </Route>,
20 )
21 
22 // routes ===
23 //   [
24 //     {
25 //       path: 'admin',
26 //       element: <Admin />,
27 //       children: [
28 //         {
29 //           path: 'dashboard',
30 //           element: <Dashboard />,
31 //         },
32 //         {
33 //           path: 'users',
34 //           element: <Users />,
35 //           loader: async () => {
36 //             return {
37 //               users: await fetchUsers(),
38 //             }
39 //           },
40 //         },
41 //         {
42 //           path: 'settings',
43 //           element: <Settings />,
44 //         },
45 //       ],
46 //     },
47 //   ]

You can then pass these routes to react-location's Router as you normally would:

1 import { Router } from '@tanstack/react-location'
2 import {
3   Route,
4   elementsToRoutes,
5 } from '@tanstack/react-location-elements-to-routes'
6 
7 function App() {
8   return (
9     <Router
10       routes={elementsToRoutes(
11         <Route path="admin" element={<Admin />}>
12           <Route path="dashboard" element={<Dashboard />} />
13           <Route
14             path="users"
15             element={<Users />}
16             loader={async () => {
17               return {
18                 users: await fetchUsers(),
19               }
20             }}
21           />
22           <Route path="settings" element={<Settings />} />
23         </Route>,
24       )}
25     />
26   )
27 }