Prynik
@Prynik

Почему в Route не работает компонент при выводе в цикле?

main.routes.js
// роуты
import React from "react"
import {Switch, Route, Redirect} from "react-router-dom"
import NotFound from '../components/pages/status/404.page'
import Unauthorized from '../components/pages/status/401.page'
import { StorageContextConsumer } from "../context/storage"
import Access from "../components/etc/Access"

export default () => {
    return (
        <StorageContextConsumer>
            {context => (
                <Switch>
                    {
                        context.modules.map(module => (
                            /*
                                 module выглядит так
                                {
                                    uname: `desktop_module`,
                                    path: `/`,
                                    accessLevel: 1,
                                    Component: Page // импортированный компонент страницы
                                }
                             */
                            <Access requiredLevel={module.accessLevel} key={module.uname}>
                                <Route
                                    path={module.path}
                                    component={module.Component}
                                    exact
                                />
                            </Access>
                        ))
                    }
                    <Route path="/401" component={Unauthorized} exact />
                    <Route path="/404" component={NotFound} exact />
                    <Redirect to="/404" />
                </Switch>
            )}
        </StorageContextConsumer>
    )
}


При чем если поместить Route
<Route path="/401" component={Unauthorized} exact />
<Route path="/404" component={NotFound} exact />
<Redirect to="/404" />

перед циклом, то все работает

---- дополнено ----

Если использовать без контекста и consumer, тогда все работает.

Access.js (компонент Access)
import React from "react"
import { StorageContextConsumer } from "../../context/storage"

export default props => (
    <StorageContextConsumer>
        {context => <>
            {
                props.strict
                    ? context.userAccessLevel === props.requiredLevel && props.children
                    : context.userAccessLevel <= props.requiredLevel && props.children
            }
        </>}
    </StorageContextConsumer>
)
  • Вопрос задан
  • 160 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы