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

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

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