diff --git a/demos/intermediate/package-lock.json b/demos/intermediate/package-lock.json
index 10d84a4..32d76a8 100644
--- a/demos/intermediate/package-lock.json
+++ b/demos/intermediate/package-lock.json
@@ -5674,14 +5674,6 @@
         "tiny-warning": "^1.0.0"
       }
     },
-    "react-router-guards": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/react-router-guards/-/react-router-guards-1.0.2.tgz",
-      "integrity": "sha512-RuNR+1sa7M96Jc3/hQxYw1E1ItYRUGFn+MKSoHSYCoWm6/JneA0z7C5spC9211FlkVXm79nonNtGy7exHSyKbA==",
-      "requires": {
-        "tiny-invariant": "^1.0.4"
-      }
-    },
     "react-waypoint": {
       "version": "9.0.2",
       "resolved": "https://registry.npmjs.org/react-waypoint/-/react-waypoint-9.0.2.tgz",
diff --git a/demos/intermediate/src/containers/Loading/index.tsx b/demos/intermediate/src/containers/Loading/index.tsx
index 3804513..b9af874 100644
--- a/demos/intermediate/src/containers/Loading/index.tsx
+++ b/demos/intermediate/src/containers/Loading/index.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
+import { LoadingPageComponentType } from 'react-router-guards';
 import { Pokeball } from 'svgs';
 import styles from './loading.module.scss';
 
-const Loading = () => (
+const Loading: LoadingPageComponentType = () => (
   <div className={styles.container}>
     <div className={styles.icon}>
       <Pokeball isAnimated />
diff --git a/demos/intermediate/src/containers/NotFound/index.tsx b/demos/intermediate/src/containers/NotFound/index.tsx
index 179b62a..b3c0454 100644
--- a/demos/intermediate/src/containers/NotFound/index.tsx
+++ b/demos/intermediate/src/containers/NotFound/index.tsx
@@ -1,12 +1,15 @@
 import React from 'react';
+import { ErrorPageComponentType } from 'react-router-guards';
 import { Link } from 'components';
 import styles from './notFound.module.scss';
 
-const NotFound = () => (
+const NotFound: ErrorPageComponentType = ({ error }) => (
   <div className={styles.container}>
     <img className={styles.image} src={`/img/missingno.png`} alt="Not found" />
     <h1 className={styles.title}>Uh-oh!</h1>
     <p className={styles.body}>We couldn't catch that Pokémon.</p>
+    {error && <small className={styles.error}>{error}</small>}
+
     <Link to="/">View 'em all</Link>
   </div>
 );
diff --git a/demos/intermediate/src/containers/NotFound/notFound.module.scss b/demos/intermediate/src/containers/NotFound/notFound.module.scss
index 8ae11f7..d4525d2 100644
--- a/demos/intermediate/src/containers/NotFound/notFound.module.scss
+++ b/demos/intermediate/src/containers/NotFound/notFound.module.scss
@@ -22,8 +22,10 @@
   margin-bottom: $spacing--base;
 }
 
-.body {
+.error {
   margin-bottom: $spacing--lg;
+  margin-top: $spacing--base;
+  opacity: 0.5;
 
   @include mq($bp--mobile) {
     margin-bottom: $spacing--xl;
diff --git a/docs/guard-provider.md b/docs/guard-provider.md
index 6fff31a..cb6738a 100644
--- a/docs/guard-provider.md
+++ b/docs/guard-provider.md
@@ -14,8 +14,8 @@ The `GuardProvider` provides an API for declaring global guards and loading and
 interface GuardProviderProps {
   guards?: GuardFunction[];
   ignoreGlobal?: boolean;
-  loading?: PageComponent;
-  error?: PageComponent;
+  loading?: LoadingPageComponent;
+  error?: ErrorPageComponent;
 }
 ```
 
diff --git a/docs/guarded-route.md b/docs/guarded-route.md
index 9d82c1c..acf9295 100644
--- a/docs/guarded-route.md
+++ b/docs/guarded-route.md
@@ -14,8 +14,8 @@ The `GuardedRoute`, on top of accepting the same props as a regular [`Route`](ht
 interface GuardedRouteProps extends RouteProps {
   guards?: GuardFunction[];
   ignoreGlobal?: boolean;
-  loading?: PageComponent;
-  error?: PageComponent;
+  loading?: LoadingPageComponent;
+  error?: ErrorPageComponent;
   meta?: Record<string, any>;
 }
 ```
diff --git a/docs/page-components.md b/docs/page-components.md
index d47e295..37c7248 100644
--- a/docs/page-components.md
+++ b/docs/page-components.md
@@ -9,10 +9,6 @@ Page components are used for setting loading and error pages.
 
 ## API
 
-```ts
-type PageComponent = React.Component | string | boolean | number | null | undefined;
-```
-
 ## Loading page
 
 Loading pages are React components that are displayed while guard middleware is resolving.
@@ -45,25 +41,35 @@ _**Note:** If using a React component for your error page, it can receive the er
 
 With strings:
 
-```jsx
-<GuardProvider loading="Loading..." error="Not found." />
+```tsx
+import { GuardProvider } from 'react-router-guards';
+
+<GuardProvider loading="Loading..." error="Not found." />;
 ```
 
 With React components:
 
-```jsx
-const NotFound = ({ error }) => (
+```tsx
+import {
+  ErrorPageComponentType,
+  GuardProvider,
+  LoadingPageComponentType,
+} from 'react-router-guards';
+
+const NotFound: ErrorPageComponentType = ({ error }) => (
   <div>
     <h1>Not found.</h1>
-    <p>{error}</p>
+    {error && <p>{error}</p>}
   </div>
 );
 
-const Loading = () => (
+const Loading: LoadingPageComponentType = () => (
   <div>
     <div id="loader" />
   </div>
 );
 
+// ...
+
 <GuardProvider loading={Loading} error={NotFound} />;
 ```
diff --git a/package.json b/package.json
index a8c571c..03fdbfe 100644
--- a/package.json
+++ b/package.json
@@ -47,10 +47,6 @@
     "*.{js,ts,tsx}": [
       "eslint --fix",
       "git add"
-    ],
-    "*.scss": [
-      "stylelint",
-      "git add"
     ]
   },
   "husky": {
diff --git a/package/src/Guard.tsx b/package/src/Guard.tsx
index e27d94c..b7cec29 100644
--- a/package/src/Guard.tsx
+++ b/package/src/Guard.tsx
@@ -13,10 +13,10 @@ import {
   NextAction,
   NextPropsPayload,
   NextRedirectPayload,
+  RouteError,
 } from './types';
 
 type PageProps = NextPropsPayload;
-type RouteError = string | Record<string, any> | null;
 type RouteRedirect = NextRedirectPayload | null;
 
 interface GuardsResolve {
diff --git a/package/src/GuardedRoute.tsx b/package/src/GuardedRoute.tsx
index 2d6fcdf..dafa7bb 100644
--- a/package/src/GuardedRoute.tsx
+++ b/package/src/GuardedRoute.tsx
@@ -5,7 +5,7 @@ import ContextWrapper from './ContextWrapper';
 import Guard from './Guard';
 import { ErrorPageContext, GuardContext, LoadingPageContext } from './contexts';
 import { useGlobalGuards } from './hooks';
-import { GuardedRouteProps, PageComponent } from './types';
+import { GuardedRouteProps, LoadingPageComponent, ErrorPageComponent } from './types';
 
 const GuardedRoute: React.FunctionComponent<GuardedRouteProps> = ({
   children,
@@ -30,8 +30,8 @@ const GuardedRoute: React.FunctionComponent<GuardedRouteProps> = ({
       {...routeProps}
       render={() => (
         <GuardContext.Provider value={routeGuards}>
-          <ContextWrapper<PageComponent> context={LoadingPageContext} value={loading}>
-            <ContextWrapper<PageComponent> context={ErrorPageContext} value={error}>
+          <ContextWrapper<LoadingPageComponent> context={LoadingPageContext} value={loading}>
+            <ContextWrapper<ErrorPageComponent> context={ErrorPageContext} value={error}>
               <Guard name={path} component={component} meta={meta} render={render}>
                 {children}
               </Guard>
diff --git a/package/src/contexts.ts b/package/src/contexts.ts
index 145346e..a32b654 100644
--- a/package/src/contexts.ts
+++ b/package/src/contexts.ts
@@ -1,11 +1,11 @@
 import { createContext } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
-import { PageComponent, GuardFunction } from './types';
+import { GuardFunction, ErrorPageComponent, LoadingPageComponent } from './types';
 
-export const ErrorPageContext = createContext<PageComponent>(null);
+export const ErrorPageContext = createContext<ErrorPageComponent>(null);
 
 export const FromRouteContext = createContext<RouteComponentProps | null>(null);
 
 export const GuardContext = createContext<GuardFunction[] | null>(null);
 
-export const LoadingPageContext = createContext<PageComponent>(null);
+export const LoadingPageContext = createContext<LoadingPageComponent>(null);
diff --git a/package/src/index.ts b/package/src/index.ts
index cdf1dbe..4822bc7 100644
--- a/package/src/index.ts
+++ b/package/src/index.ts
@@ -6,5 +6,8 @@ export {
   GuardFunction,
   GuardProviderProps,
   Next,
+  RouteError,
   PageComponent,
+  LoadingPageComponentType,
+  ErrorPageComponentType,
 } from './types';
diff --git a/package/src/renderPage.tsx b/package/src/renderPage.tsx
index d44d09b..a383e8c 100644
--- a/package/src/renderPage.tsx
+++ b/package/src/renderPage.tsx
@@ -11,7 +11,7 @@ type BaseProps = Record<string, any>;
  * @returns the page component
  */
 function renderPage<Props extends BaseProps>(
-  page: PageComponent,
+  page: PageComponent<any>,
   props?: Props,
 ): React.ReactElement | null {
   if (!page) {
diff --git a/package/src/types.ts b/package/src/types.ts
index 197f2e4..599220d 100644
--- a/package/src/types.ts
+++ b/package/src/types.ts
@@ -57,10 +57,25 @@ export type GuardFunction = (
   next: Next,
 ) => void;
 
+export type RouteError = string | null;
+
 /**
  * Page Component Types
  */
-export type PageComponent = ComponentType | null | undefined | string | boolean | number;
+export type PageComponentType<P = {}> = ComponentType<RouteComponentProps & P>;
+export type PageComponent<P = {}> =
+  | PageComponentType<P>
+  | null
+  | undefined
+  | string
+  | boolean
+  | number;
+
+export type LoadingPageComponent = PageComponent;
+export type ErrorPageComponent = PageComponent<{ error: RouteError }>;
+
+export type LoadingPageComponentType = PageComponentType;
+export type ErrorPageComponentType = PageComponentType<{ error: RouteError }>;
 
 /**
  * Props
@@ -68,8 +83,8 @@ export type PageComponent = ComponentType | null | undefined | string | boolean
 export interface BaseGuardProps {
   guards?: GuardFunction[];
   ignoreGlobal?: boolean;
-  loading?: PageComponent;
-  error?: PageComponent;
+  loading?: LoadingPageComponent;
+  error?: ErrorPageComponent;
 }
 
 export type PropsWithMeta<T> = T & {