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>
)