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

Question

[fronter-up]

Добрый день! Скажите пожалуйста как можно улучшить данный код?

const Main = () => (
  <main>
    <Switch>
      <Route exact path='/' component={Home}/>
      <Route path='/roster' component={Roster}/>
      <Route path='/schedule' component={Schedule}/>
    </Switch>
  </main>
)

Код взят из примера.
Интересует может лучше было бы выносить path в переменные или как-то генерировать их через функцию или целый роут генерировать?
У кого какие мысли?

Answer 1

[Антон Спирин]

Роуты:

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 на стор и добавив в роуты дополнительные ключи.

Comments

[fronter-up]

Спасибо за ответ!
Не совсем понял как могла бы выглядеть функция getRoutes.
И еще может посоветуете... какая есть альтернатива key={i}, если индекс нельзя использовать в цыклах по styleGuide? Если использовать key={route.path} будут ошибки так как есть несколько меню.

[Антон Спирин]

fronter-up, индекс можно использовать там, где нет альтернатив и там где это безопасно. В данном случае его использование не опасно. Во всех проектах, что видел роуты мапят с индексом в key. path в key писать не пробовал. Попробуйте, вдруг подойдет.

[Антон Спирин]

fronter-up, getRoutes например так:

export getRoutes = permissions => routes.filer(route => route.permission ? permissions.includes(permission) : true);

но лучше это как-то так организовать:

export default function SwitchWithRoutes({ routes, checkHasAccess }) {
  return (
    <Switch>
      {routes.map((route, i) => {
       
         if(checkHasAccess(route.permissions) {
           return (
             <Route
               key={i}
               exact={route.path === '/'}
               path={route.path}
               component={route.component}
             />);
          }
          return null;
      })}
    </Switch>
  );
}

const mapStateToProps = state => ({
  checkHasAccess: checkHasAccessSelector(state),
});

export default connect(mapStateToProps)(SwitchWithRoutes);

[fronter-up]

Антон Спирин, Скажите пожалуйста пишите ли вы тесты для роутов? Стоит ли такое делать?
И как быть с 404 страницей? Не пойму что писать в масиве в path: ?

[Антон Спирин]

fronter-up, для NotFound все просто, в конец массива добавляете такой путь:

const routes = [
   ...
  {
    path: '*',
    component: MyNotFoundСomponent,
  }
];

По поводу тестов, ничего не скажу, так как не было нужды тестировать роуты. Статьи на эту тему в интернете есть, но я не представляю, как их вообще возможно поломать.

[fronter-up]

Антон Спирин, Спасибо

Answer 2

[Interface]

Я думаю лучше всего стоит придерживаться того формата, который предлагает автор вашей библиотеки для роутинга. Потому как излишнее упрощение / оптимизация может привести к проблемам в будущем. Если вам кажется, что предлагаемый синтаксис роутинга не самый удачный (это нормально), можно подыскать альтернативный роутер.