Route prop: errorElement
The errorElement prop specifies the React element to render at this route if an error occurs. It is mutually exclusive with the ErrorBoundary prop.
React Router · API · all subjects
route
22 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Route component overview
Route configures an element to render when a pattern matches the current location. It must be rendered within a Routes element. These routes in declarative form do not participate in data loading, actions, code splitting, or other route module features when used with BrowserRouter.
Route signature
Route accepts props of type RouteProps and returns React.ReactElement | null.
Route prop: action
The action prop sets the route action. See the action documentation in route object specification.
Route prop: caseSensitive
The caseSensitive prop determines whether the path should be case-sensitive. It defaults to false.
Route prop: children
The children prop accepts child Route components.
Route prop: element
The element prop specifies the React element to render when this Route matches. It is mutually exclusive with the Component prop.
Route prop: handle
The handle prop sets the route handle.
Route prop: hydrateFallbackElement
The hydrateFallbackElement prop specifies the React element to render while this router is loading data. It is mutually exclusive with the HydrateFallback prop.
Route prop: id
The id prop provides the unique identifier for this route for use with DataRouters.
Route prop: index
The index prop specifies whether this is an index route.
Route prop: lazy
The lazy prop accepts a function that returns a promise resolving to a route object. It is used for code-splitting routes. See the lazy documentation in route object specification.
Route prop: loader
The loader prop sets the route loader. See the loader documentation in route object specification.
Route prop: path
The path prop specifies the path pattern to match. If unspecified or empty, the route becomes a layout route.
Route prop: shouldRevalidate
The shouldRevalidate prop sets the route shouldRevalidate function. See the shouldRevalidate documentation in route object specification.
Route with declarative BrowserRouter example
Example of Route used in declarative form with BrowserRouter and Routes: function App() { return ( <BrowserRouter> <Routes> <Route index element={<StepOne />} /> <Route path="step-2" element={<StepTwo />} /> <Route path="step-3" element={<StepThree />} /> </Routes> </BrowserRouter> ); }
Route with data router example
Example of Route used with a data router using createRoutesFromElements and createBrowserRouter: 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} />; }
Route modes
Route supports three modes: framework, data, and declarative.
createStaticRouter routes parameter
The routes parameter is a RouteObject array. This is the route objects to create a static DataRouter for.
createStaticRouter opts.branches parameter
The opts.branches parameter is an optional pre-computed array of RouteBranch<DataRouteObject>. It is used for optimization.
createStaticRouter return value
createStaticRouter returns a static DataRouter that can be used to render the provided routes.
Route ID generation rules
Route IDs are created automatically based on the path of the route file relative to the app folder without the extension. Examples: app/root.tsx becomes 'root', app/routes/teams.tsx becomes 'routes/teams', app/whatever/teams.$id.tsx becomes 'whatever/teams.$id'. Route IDs can also be specified manually in routes.ts file using the id property.