Skip to content

Latest commit

 

History

History
55 lines (41 loc) · 2.48 KB

guard-provider.md

File metadata and controls

55 lines (41 loc) · 2.48 KB
Raw

Guard Provider

The GuardProvider component is a high-level wrapper for your entire routing solution.

API

The GuardProvider provides an API for declaring global guards and loading and error pages that can be used by any GuardedRoute within its scope:

interface GuardProviderProps {
  guards?: GuardFunction[];
  ignoreGlobal?: boolean;
  loading?: PageComponent;
  error?: PageComponent;
}
Prop Optional Description
guards ✅ global guards for all children GuardProviders and GuardedRoutes
ignoreGlobal ✅ whether to ignore guards set by parent GuardedProviders
loading ✅ the global loading page for all children
error ✅ the global error page for all children

See here for more information on how nesting guard providers affects global guards and loading and error pages.

App set-up

All GuardProviders must be wrapped by a Router component.

const App = () => (
  <Router>
    <GuardProvider guards={guards} loading={Loading} error={NotFound}>
      <GuardedRoute path="/" exact component={Home} />
    </GuardProvider>
  </Router>
);

Nesting guard providers

Nesting guard providers is useful in case where you may only want a certain subset of routes to have the same guards, loading page, and/or error page.

By nesting guard providers, you can either chain functionality or override that of its parent(s):

Prop Result
guards Overridden if ignoreGlobal is true; otherwise, guards are appended to the end of the middleware queue.
loading Overridden, if value provided.
error Overridden, if value provided.