The GuardedRoute
component acts as a replacement for the default Route
component provided by React Router, allowing for routes to use guard middleware.
The GuardedRoute
, on top of accepting the same props as a regular Route
, provides an API for declaring guards and loading and error pages on an individual route basis:
interface GuardedRouteProps extends RouteProps {
guards?: GuardFunction[];
ignoreGlobal?: boolean;
loading?: PageComponent;
error?: PageComponent;
meta?: Record<string, any>;
}
The following table explains the guard-specific props for this component.
Prop | Optional | Description | Notes |
---|---|---|---|
guards |
✅ | the guards to set for this route | It's important to note that guards set by the GuardedRoute will be added to the end of the middleware queue set by its parent GuardedProvider . |
ignoreGlobal |
✅ | whether to ignore guards set by parent GuardedProvider s |
|
loading |
✅ | the loading page for this route | Overrides the global loading page, if value provided. |
error |
✅ | the error page for this route | Overrides the global error page, if value provided. |
meta |
✅ | an object of data about this route | See metadata. |
For more information about the props of a regular Route component, see this guide.
All GuardedRoute
s must be wrapped by a GuardedProvider
component.
const App = () => (
<Router>
<GuardProvider guards={guards} loading={Loading} error={NotFound}>
<GuardedRoute path="/" exact component={Home} />
<GuardedRoute path="/pokemon/:id" exact component={Pokemon} guards={[fetchPokemon]} />
<GuardedRoute path="*" component={NotFound} />
</GuardProvider>
</Router>
);
In order to provide more information about a route, we've added a meta
prop to the GuardedRoute
.
The meta
object can include anything! In our basic demo we used the meta
object to determine which pages required auth.
You can access a route's metadata using to.meta
in a guard function.