javascript - react : how to redirect a match of a list of components to sub-path (/templates =>/templates/list)

Question

我有一个React应用程序，并且我不想复制所有组件中的功能以将用户重定向到 /<component>/list如果他们去/<component> - 我该如何在更高的层面上做到这一点？

我有一个布局组件，如果我猜的话，它就是执行此操作的地方。我有一个getRoutes处理路由定义文件的方法。但是，我想做的是提供必须重定向到 /<component>/list 的组件列表。路径(如果它们转到该列表中的组件之一):

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

我不认为我走在正确的轨道上，但是有没有与我想要实现的目标类似的东西？

Answer 1

当然，您可以使用 {} 将逻辑嵌入到 JSX 中

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

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

您必须为具有不同逻辑的处理程序(例如自定义)放置一个处理程序，这样您就可以重组列表以使用对象，例如:

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

然后在 map 中相应地访问属性:

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