Add option to wrap routes with a frame

CHANGELOG.md

@@ -0,0 +1,20 @@
+# CHANGELOG.md
+
+## 1.0.0 (unreleased)
+
+BREAKING:
+
+  - upgrade to use `react-router-dom: ^6.0.1`
+  - `Redirect` renamed to `Navigate` to conform with react-router-dom naming
+  - `RouterSwitch` renamed to `RouterRoutes` to conform with react-router-dom naming
+  - the `sensitive` prop of a route was renamed to `caseSensitive` to conform with react-router-dom naming
+  - the `strict` prop of a route does no longer exist
+  - the `exact` prop of a route does no longer exist. If you need your path to be deep matching add a `*` to the end
+  - the `component` prop of the route function now requires a `React.ReactComponent` instead of a `React.ReactElement`.
+
+Features:
+  - add ability to wrap all routes in the `RouterRoutes` component with a frame component
+
+Fix:
+
+  - use correct JSX syntax in `Middleware` documentation example

README.md

@@ -35,10 +35,10 @@ The last routing library you will ever need in your React projects. (At least if
     - [useRouteParams](#userouteparams)
     - [useRouteActive and useRoutesActive](#userouteactive-and-useroutesactive)
   - [Components](#components)
-    - [RouterSwitch](#routerswitch)
+    - [RouterRoutes](#routerroutes)
     - [Link](#link)
     - [NavLink](#navlink)
-    - [Redirect](#redirect)
+    - [Navigate](#navigate)
     - [Route](#route)
   - [Roadmap](#roadmap)
   - [Contributing](#contributing)
@@ -65,45 +65,45 @@ const defaultOptions = {
   appBar: true,
 };
 
-const AuthMiddleware: RouteMiddleware = next => {
+const AuthMiddleware: RouteMiddleware = (next) => {
   if (isAuthenticated) {
     return next;
   } else {
-    return Redirect to={router.login()};
+    return () => <Navigate to={router.login()} />;
   }
 };
 
 export const router = OptionsRouter(defaultOptions, route => ({
   home: route('/', {
-    component: HomePage,
+    component: <HomePage />
   }),
   login: route('/login', {
-    component: LoginPage,
+    component: <LoginPage />
     options: { appBar: false },
   }),
   players: route(
     '/players',
     {
-      component: PlayersPage,
+      component: <PlayersPage />
       middleware: AuthMiddleware,
     },
     route => ({
       info: route(
         '/:name/:id',
         {
-          component: PlayerInfoPage,
+          component: <PlayerInfoPage />
           params: {
             name: stringParser,
             id: intParser,
           },
         },
         route => ({
           rating: route('/rating/:id', {
-            component: PlayerRatingPage,
+            component: <PlayerRatingPage />
             params: { id: intParser },
           }),
           ban: route('/rating/:id', {
-            component: PlayerRatingPage,
+            component: <PlayerRatingPage />
             params: { id: intParser },
           }),
         })
@@ -136,7 +136,7 @@ const App = () => {
     <BrowserRouter>
       <div>
         { appBar && <AppBar />}
-        <RouterSwitch router={router} />
+        <RouterRoutes router={router} />
       </div>
     </BrowserRouter>
   );
@@ -164,10 +164,10 @@ const defaultOptions = {
 
 const router = OptionsRouter(defaultOptions, route => ({
   home: route('/', {
-    component: HomePage,
+    component: <HomePage />
   }),
   login: route('/login', {
-    component: LoginPage,
+    component: <LoginPage />
     options: { appBar: false }
   }),
 });
@@ -178,7 +178,7 @@ const App = () => {
   return (
     <div>
       {options.appBar && <AppBar>}
-      <RouterSwitch router={router} />
+      <RouterRoutes router={router} />
     </div>
   );
 };
@@ -190,17 +190,17 @@ The Router is basically the same as the OptionsRouter but it doesn't have Option
 ```tsx
 const router = Router(route => ({
   home: route('/', {
-    component: HomePage,
+    component: <HomePage />
   }),
   login: route('/login', {
-    component: LoginPage,
+    component: <LoginPage />
   }),
 });
 
 const App = () => {
   return (
     <div>
-      <RouterSwitch router={router} />
+      <RouterRoutes router={router} />
     </div>
   );
 };
@@ -230,11 +230,8 @@ const router = OptionsRouter(options, route => ({
       // Global options for this route
       options?: Partial<RO>;
 
-      // Wether or not to include this routes child routes in a RouterSwitch  - Defaults to true
+      // Wether or not to include this routes child routes in a RouterRoutes  - Defaults to true
       includeChildren?: boolean;
-
-      // Wether or not this route is exact - Defaults to true
-      exact?: boolean;
     }
   ),
 });
@@ -249,7 +246,7 @@ Basic parameters are defined with a colon in front of them.
 ```tsx
 const router = Route(route => ({
   test: route('test/:id', {
-    component: TestPage,
+    component: <TestPage />,
     params: {
       id: intParser,
     }
@@ -264,7 +261,7 @@ If you want a parameter to be optional you can add a question mark behind it. Op
 ```tsx
 const router = Route(route => ({
   test: route('test/:id?', {
-    component: TestPage,
+    component: <TestPage />,
     params: {
       id: intParser,
     }
@@ -279,7 +276,7 @@ A query parameter has an ampersand in front of it, they can be chained and also
 ```tsx
 const router = Route(route => ({
   test: route('test/:id?&:filter&:page?', {
-    component: TestPage,
+    component: <TestPage />,
     params: {
       id: intParser,
       page: intParser,
@@ -296,7 +293,7 @@ Child routes can be defined with the third argument of the route function - Anot
 ```tsx
 const router = Route(route => ({
   test: route('test/:id?&:filter&:page?', {
-    component: TestPage,
+    component: <TestPage />,
     params: {
       id: intParser,
       page: intParser,
@@ -321,17 +318,17 @@ const AuthMiddleware: RouteMiddleware = (next) => {
   // firebase.auth().currentUser won't work since it's not always up to date
   const firebaseUser = useSelector((state: RootState) => state.firebaseUser);
 	if (firebaseUser === null) {
-		return Redirect to={router.login()};
+		return () => <Navigate to={router.login()} />;
 	}
 	return next;
 }
 
 export const router = Router(route => ({
   login: route('login', {
-    component: Login,
+    component: <Login />,
   }),
   restricted: route('restricted', {
-    component: Restricted,
+    component: <Restricted />,
     middleware: AuthMiddleware,
   }),
 });
@@ -357,7 +354,7 @@ const testTabs = ['overview', 'statistics', 'comments'] as const;
 
 const router = Route(route => ({
   test: route('test&:tab', {
-    component: TestPage,
+    component: <TestPage />,
     params: {
       tab: stringListParser(testTabs),
     }
@@ -398,10 +395,10 @@ This is useful whenever you need those global route options of an [OptionsRouter
 const options = { appBar: true };
 const router = OptionsRouter(options, route => ({
   home: route('', {
-    component: HomePage
-  }),
+    component: <HomePage />
+    }),
   entry: route('entries/:id', {
-    component: EntryPage
+    component: <EntryPage />
     params: {
       id: intParser
     }
@@ -476,12 +473,28 @@ export const App = () => {
 
 ## Components
 
-### RouterSwitch
+### RouterRoutes
+
+This is what you would use instead of the `Routes` and `Route` from `react-router-dom`. You just give it your router and it automatically adds al the routes for you.
+
+```tsx
+<RouterRoutes router={router}/>
+```
+
+You can optionally wrap all routes with a frame.
 
-This is what you would use instead of the `Switch` and `Route` from `react-router-dom`. You just give it your router and it automatically adds al the routes for you.
 
 ```tsx
-<RouterSwitch router={router}/>
+const Frame: React.FC = ({children}) => {
+  return (
+    <>
+      <h1>Frame</h1>
+      {children}
+    </>
+  );
+}
+
+<RouterRoutes router={router} frame={<Frame />} />
 ```
 
 ### Link
@@ -496,11 +509,11 @@ This is a simple wrapper Component for the `react-router-dom` NavLink.
 ```tsx
 <NavLink to={router.home()}></NavLink>
 ```
-### Redirect
-This is a simple wrapper Component for the `react-router-dom` Redirect.
+### Navigate
+This is a simple wrapper Component for the `react-router-dom` Navigate.
 
 ```tsx
-<Redirect to={router.home()}></Redirect>
+<Navigate to={router.home()}></Navigate>
 ```
 ### Route
 This is a simple wrapper Component for the `react-router-dom` Route.