The react-location-elements-to-routes
package exports:
Route
componentelementsToRoutes
functionThe 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[]
.<Route>
and <React.Fragment>
/<></>
elements may be used<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:
import {Route,elementsToRoutes,} from '@tanstack/react-location-elements-to-routes'const routes = elementsToRoutes(<Route path="admin" element={<Admin />}><Route path="dashboard" element={<Dashboard />} /><Routepath="users"element={<Users />}loader={async () => {return {users: await fetchUsers(),}}}/><Route path="settings" element={<Settings />} /></Route>,)// routes ===// [// {// path: 'admin',// element: <Admin />,// children: [// {// path: 'dashboard',// element: <Dashboard />,// },// {// path: 'users',// element: <Users />,// loader: async () => {// return {// users: await fetchUsers(),// }// },// },// {// path: 'settings',// element: <Settings />,// },// ],// },// ]
You can then pass these routes to react-location
's Router
as you normally would:
import { Router } from '@tanstack/react-location'import {Route,elementsToRoutes,} from '@tanstack/react-location-elements-to-routes'function App() {return (<Routerroutes={elementsToRoutes(<Route path="admin" element={<Admin />}><Route path="dashboard" element={<Dashboard />} /><Routepath="users"element={<Users />}loader={async () => {return {users: await fetchUsers(),}}}/><Route path="settings" element={<Settings />} /></Route>,)}/>)}
The best JavaScript newsletter! Delivered every Monday to over 76,000 devs.