createRoutesFromElements

[MODES: data]

Summary

Reference Documentation ↗

Create route objects from JSX elements instead of arrays of objects.

tsx

const routes = createRoutesFromElements(
  <>
    <Route index loader={step1Loader} Component={StepOne} />
    <Route path="step-2" loader={step2Loader} Component={StepTwo} />
    <Route path="step-3" loader={step3Loader} Component={StepThree} />
  </>
);

const router = createBrowserRouter(routes);

function App() {
  return <RouterProvider router={router} />;
}

Params

children

The React children to convert into a route config

parentPath

The path of the parent route, used to generate unique IDs. This is used for internal recursion and is not intended to be used by the application developer.

Returns

An array of RouteObjects that can be used with a DataRouter