Реакция: как перенаправить совпадение списка компонентов в подпуть (/ templates => / templates / list)

Question

У меня есть приложение React, и я не хочу дублировать функциональность во всех моих компонентах, чтобы перенаправить пользователя на /<component>/list, если они go на /<component> - как бы я это сделал на более высоком уровне? Уровень?

У меня есть компонент макета, который будет местом, чтобы сделать это, если бы я должен был догадаться. У меня есть getRoutes метод там, который обрабатывает файл определений маршрутов. Однако я хотел бы предоставить список компонентов, которые необходимо перенаправить на этот /<component>/list путь, если они go к одному из компонентов в этом списке:

List: ['/templates', '/activities', '/trials']
Visiting:
    /templates: redirects to `/templates/list`
    /activities: redirects to `/activities/list`
    /custom: does nothing, renders CustomComponent
    /trials: redirects to `/trials/list`
    /trials/new: does nothing, renders new method

Возможно ли это ? Я пытался использовать, но безуспешно при захвате предметов без явно заданного пути:

<Switch>
    <Route path="/templates">
        {<Redirect to="/templates/list"/>}
    </Route>
    ...
</Switch>

Есть ли способ сделать это примерно так? :

var paths = ['templates', 'trials'];
getRoutes = routes => {
   return (
      [if path matches /{paths[0..n]]
          <Redirect to={{pathname: /paths[0..n]/list}} />
      [/if]
   );
}

Не думаю, что я здесь на правильном пути, но есть ли что-то похожее на то, что я пытаюсь достичь sh?

Answer 1

Да, вы можете использовать следующий синтаксис :paramname(path1|path2), который будет соответствовать path1 и path2 и назвать параметр как paramname. Затем в render вы можете перенаправить на основе этого параметра туда, куда хотите

    <Route
      path="/:toplevel(templates|activities|trials)"
      exact
      render={({ match }) => (
        <Redirect to={`/${match.params.toplevel}/list`} />
      )}
    />

Все это упоминается в path документах act-router-dom

Любой действительный URL-путь или массив путей, которые path-to-regexp@^1.7.0 понимает.

И в документах этого пакета см. custom-match-параметры раздел

Answer 2

Конечно, вы можете встраивать логи c в JSX с помощью {}

const list = ['templates', 'activities', 'trials']

return (
  <Switch>
  {list.map(item => (
      <Route 
        path={"/"+item}
        render={() => <Redirect to={"/"item+"/list"}/>}
      />
   )}
 </Switch>
)

Вы должны будете добавить обработчик для тех, у кого разные логи c (например, custom ), чтобы вы могли реструктурировать список, чтобы использовать вместо него такие объекты, как:

[{path: 'subpath1', component: null}, {path: 'subpath2', component: component2}]

, а затем получить доступ к соответствующим свойствам на карте:

{
    list.map(item => {
      if (item.component) {
        return (<Route path={"/"+item.path} component={item.component}/>)
      } else {
        return (
          <Route 
            path={"/"+item.path}
            render={() => <Redirect to={"/"item.path+"/list"}/>}
          </Route>
        )
      }
   }) 
}