Частные и общедоступные маршруты с конфигурацией маршрутизатора react

#reactjs #react-router

Вопрос:

У меня есть файл конфигурации для маршрутизатора, и я хочу применить частный или общедоступный маршрут к конфигурации. Если маршрут является частным, то я добавлю параметр типа маршрута в конфигурацию, например параметр компонента.

 const routes: Array<IRouteConfig> = [
    {
        path: '/',
        component: Home,
        exact: true,
        //routeType: PublicRoute (like this)

    }
]

export const MainRouter = (): React.ReactElement => {
    return (
        <Router>
            <Switch>
                {routes.map((item: IRouteConfig, i) => {
                    return <RouteWithSubRoutes {...item} key={`${item.path}-${i}`} />
                })}
            </Switch>
        </Router>
    )
}

function RouteWithSubRoutes(route: IRouteConfig) {
    
    return (
        <Route // I tried route.routeType but it throws an error
            path={route.path}
            render={(props) => (
                <route.component {...props} routes={route.routes} />
            )}
        />
    )
}
 

Компонент PublicRoute выглядит следующим образом

 export const PublicRoute = ({
    component: Component,
    restricted,
    loggedIn,
    ...rest
}: IPublicRoute): ReactElement => {
    return (
        <Route
            {...rest}
            render={(props) =>
                loggedIn amp;amp; restricted ? <Redirect to='/' /> : <Component {...props} />
            }
        />
    )
}
 

Любая рекомендация или помощь будут потрясающими. Спасибо