Как сгенерировать Routes в React?

Question

[chincharovpc]

При переходе на главную страницу нужно показать компонент:
Если не авторизован Login
Если авторизован и он Админ, то Admin/Dashboard,
Если авторизован и он Менеджер, то Manager/Dashboard,

Как мне реализовать такую схему?

<Router history={history}>
                <Switch>
                    <Route path="/" permissions={["admin"]} auth component={DashboardAdmin}/>,
                    <Route path="/" permissions={["manager"]} auth component={DashboardManager}/>,
                    <Route path="/" noAuth component={LogIn}/>,
                </Switch>
       </Router>

Comments

[alex4answ]

что за роутер используйте?

[chincharovpc]

alex4answ, react-router-dom

[alex4answ]

pakhrudin, что за permissions и auth пропсы у Route ?

[chincharovpc]

alex4answ, параметры. auth - требуется авторизация. permissions - у какой роли есть доступ

[alex4answ]

pakhrudin, это понятно, у react-router-dom нет таких пропсов, вы кастомизировали компонент я так понимаю?

[chincharovpc]

alex4answ, смог решить. Вместо Router из react-router поставил BrowserRouter из react-router-dom.
Проблема была в том, что у меня для одного адреса написаны несколько Route И в зависимости от того, кто вошел в систему, генерирую доступные для него роуты.

[alex4answ]

pakhrudin, вы кастомизировали Route или нет?
Покажите, мне интересно

[chincharovpc]

alex4answ, Да, кастомизировал. Я в цикле проверяю каждый роут из массива Routers(см. ниже) в компоненте Router(см. ниже), если подходит для данного пользователя, то возвращаю Route(react-router), иначе null

const Routers = [
    {
        path: "/",
        permissions: ["admin"],
        layout: true,
        exact: true,
        component: Admin
    },
    {
        path: "/",
        permissions: ["manager"],
        layout: true,
        exact: true,
        component: Manager
    },
    {
        path: "/",
        permissions: ["iniciator", "investor"],
        layout: true,
        exact: true,
        component: Vnutreniy
    },
    {
        path: "/pages/:page",
        auth: true,
        layout: true,
        exact: true,
        component: ExamplePage
    },
    {
        path: "/login",
        noAuth: true,
        component: LogIn
    },
    {
        path: "/404",
        component: NotFound404
    },

<MainWrapper>
        <main>
            <BrowserRouter>
                <RouterContainer>
                    {Routers.map((router, key) => <Router key={key} {...router}/>)}
                </RouterContainer>
            </BrowserRouter>
        </main>
    </MainWrapper>

export const Router = (props) => {
    const {auth, noAuth, permissions, component, layout} = props
    //Авторизован, но адрес доступен неавторизованным
    if (auth && !isAuth()) return null
    //Не авторизован, но адрес доступен авторизованным
    if (noAuth && isAuth()) return null

    //Если указаны права
    if (permissions) {
        //Не авторизован
        if (!isAuth()) return null
        //Роль пользователя не присутствует в массиве
        if (permissions.length && !permissions.includes(getRole()))
            return null
    }

    //Если требуется Layout
    if (layout) return <Route {...props} component={() => WrapperComponent(component)}/>

    return <Route {...props}/>
}