Props
// Usually used in a declarative router
function App() {
return (
<BrowserRouter>
<Routes>
<Route index element={<StepOne />} />
<Route path="step-2" element={<StepTwo />} />
<Route path="step-3" element={<StepThree />} />
</Routes>
</BrowserRouter>
);
}
// But can be used with a data router as well if you prefer the JSX notation
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} />;
}
@public
Configures an element to render when a pattern matches the current location. It must be rendered within a Routes element. Note that these routes do not participate in data loading, actions, code splitting, or any other route module features.