// тут импорты всего нужного - React, Switch, Route
// + импорты компонентов для маршрутов
// + импорт State-ов для разных частей нашего проекта (в нашем конкретном случае это ArticlesState)
// дальше нам понадобится вот такой примерно массив (он может понадобиться не только здесь,
// поэтому экспортируем его)
export const routes = [
{
path: '/articles',
Component: Articles,
name: 'Статьи',
exact: true
},
//... и т.д.
]
// при помощи метода .map генерируем маршруты:
const Routes = () => {
return (
<Switch>
{routes.map(({ path, Component, exact }, key) => (
<Route
path={path}
key={key}
exact={exact}
render={props => {
/* тут могут передаваться разные полезные штуки */
/* возвращаем компонент, и если надо - передаем ему состояние, и всё, */
/* больше никаких оберток не надо, ни в App.js, ни внутри компонентов */
return Component === Articles || Component === Article ? (
<ArticlesState>
<Component {...props} />
</ArticlesState>
) : (
<Component {...props} />
)
}}
/>
))}
</Switch>
)
}
export default Routes