带有反应路由器配置的私有和公共路由

Question

我有一个路由器的配置文件，我想对配置应用私有或公共路由。如果路由是私有的，那么我会像组件参数一样向配置添加一个 routeType 参数。

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 && restricted ? <Redirect to='/' /> : <Component {...props} />
            }
        />
    )
}

任何推荐或帮助都会很棒。谢谢