Javascript 反应：如何将组件列表的匹配重定向到子路径（/templates=>；/templates/list）

我有一个

React

应用程序，如果用户转到

/

，我不想复制我所有组件中的功能以将用户重定向到

//list

——我将如何在更高级别上做到这一点

我有一个布局组件，如果我猜猜的话，它将是一个做这件事的地方。我有一个

getRoutes

方法处理路由定义文件。但是，我想做的是提供一个组件列表，如果组件转到该列表中的某个组件，则必须重定向到该

//列表

路径：

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]
   );
}

var路径=['templates'，'trials']；
getRoutes=routes=>{
返回(
[如果路径匹配/{paths[0..n]]
[if]
);
}

---

我认为我在这里没有走上正确的道路，但是有没有类似于我试图实现的东西？

当然，您可以使用

{}

将逻辑嵌入到JSX中

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

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

然后访问地图中相应的属性：

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

{
list.map（项=>{
if（项目组件）{
返回（）
}否则{
返回(
}
)
}
}) 
}

是的，您可以使用以下语法

：paramname（path1 | path2）

，它将匹配

path1

和

path2

，并将参数命名为

paramname

。然后在

render

中，您可以基于该参数重定向到任何您想要的位置

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

(
)}
/>

所有这些都在react路由器dom的末尾提到

任何可理解的有效URL路径或路径数组

在该软件包的文档中，请参见

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