refactor forbidden redirection

src/ScreenManager.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 
-import { withRouter, Switch } from 'react-router-dom'
+import { withRouter, Switch, Redirect } from 'react-router-dom'
 import { BrowserRouter as Router, Route } from 'react-router-dom';
 
 import { TransitionGroup, CSSTransition } from 'react-transition-group'
@@ -73,7 +73,18 @@ export class ScreenManager extends Component {
 		const hideNavbarPath = pages.filter( r => r.props.hideNavbar ).map(r => r.props.path)
 		const navbarScreenInfos = pages.filter(r => !r.props.noNavbar).map(r => ({ name: r.props.name, path: r.props.path }))
 
-
+		const renderForbidden = (screen) => {
+			if (screen) {
+				if (screen.props.redirectTo) {
+					return (
+						<Redirect to={screen.props.redirectTo} />
+					)
+				} else {
+					return screen
+				}
+			} else 
+				return null
+		}
 
 		const renderScreens = (pages) => pages.map((page, i) => {
 			const { exact, path, ...props } = page.props
@@ -82,7 +93,7 @@ export class ScreenManager extends Component {
 					if (!this.props.authCheck || (!page.props.protected || this.props.authCheck()))
 						return React.cloneElement(page, { ...props })
 					else
-						return forbiddenScreen || null
+						return renderForbidden(forbiddenScreen)
 				} } />
 			)
 		})

src/index.js

@@ -1,8 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 
-import { Redirect } from 'react-router-dom';
-
 import './index.css'
 
 import ScreenManager from './ScreenManager'
@@ -16,7 +14,7 @@ ReactDOM.render(
     <ScreenManager 
         authCheck={() => {
             // return auth status
-            return true
+            return false
         }}
     >
         <SplashScreen style={{ background: 'black' }}  />
@@ -35,9 +33,7 @@ ReactDOM.render(
         <Screen protected style={{ background: 'blue' }} name="Screen 3" exact path="/settings">
             <h1>Screen 3</h1>
         </Screen>
-        <ForbiddenScreen style={{ background: 'red' }} name="forbidden" exact path="/forbidden">
-            <Redirect to={{ pathname:"/" }} />
-        </ForbiddenScreen>        
+        <ForbiddenScreen style={{ background: 'red' }} name="forbidden" exact path="/forbidden" redirectTo={{ pathname:"/" }} />
         <NavigationBar position="bottom" />
     </ScreenManager>
 </div>