@fronter-up

Как улучшить Route, react?

Добрый день! Скажите пожалуйста как можно улучшить данный код?
const Main = () => (
  <main>
    <Switch>
      <Route exact path='/' component={Home}/>
      <Route path='/roster' component={Roster}/>
      <Route path='/schedule' component={Schedule}/>
    </Switch>
  </main>
)

Код взят из примера.
Интересует может лучше было бы выносить path в переменные или как-то генерировать их через функцию или целый роут генерировать?
У кого какие мысли?
  • Вопрос задан
  • 147 просмотров
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Роуты:
export const routes = [
  {
    component: Home,
    path: '/',
  },
  {
    component: Roster,
    path: '/roster',
 },
 {
    component: Schedule,
    path: '/schedule',
 },
];

Компонент:
export default function SwitchWithRoutes({ routes }) {
  return (
    <Switch>
      {routes.map((route, i) => (
         <Route
           key={i}
           exact={route.path === '/'}
           path={route.path}
           component={route.component}
         />
       )}
    </Switch>
  );
}


Так вы сможете при необходимости написать функцию getRoutes с нужным вам поведением или фильтровать роуты в зависимости от прав, законнектив SwitchRoutes на стор и добавив в роуты дополнительные ключи.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@Interface
Я думаю лучше всего стоит придерживаться того формата, который предлагает автор вашей библиотеки для роутинга. Потому как излишнее упрощение / оптимизация может привести к проблемам в будущем. Если вам кажется, что предлагаемый синтаксис роутинга не самый удачный (это нормально), можно подыскать альтернативный роутер.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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