从 react-router v4 中具有路径参数的路由重定向

Question

我正在尝试从一个具有 ID 的 URL 重定向到具有相同 ID 的新 URL：/folders/:id TO /folders/:id/summary

我的问题是我的容器 FolderSummaryContainer 似乎永远不会被调用：-/

这是我的 react 路由器配置 (v4)，我做得对吗？

{/* STUF */}
<Route path="/v3">
  <LayoutV3>
    <Switch>
      <Route exact path="/v3/folders" component={FolderIndexContainer} />
      <Route path="/v3/folders/:id">
        <FolderShowContainer>
          <Switch>
            <Redirect from="/v3/folders/:id" to="/v3/folders/:id/summary" />
            <Route path="/v3/folders/:id/summary" component={FolderSummaryContainer} />
            {/* STUF */}
          </Switch>
        </FolderShowContainer>
      </Route>
    </Switch>
  </LayoutV3>
</Route>
{/* STUF */}

Answer 1

不要为 Route 指定子级，而是可以这样做

<Route path="/v3">
  <LayoutV3>
    <Switch>
      <Route exact path="/v3/folders" component={FolderIndexContainer} />
      <Route path="/v3/folders/:id" component={FolderShowContainer}/>
    </Switch>
  </LayoutV3>
</Route>

你可以在你的 FolderShowContainer 返回代码中设置路由配置

class FolderShowContainer extends React.Component {
     render() {
        return (
            <div>
             {/* */}
             <Switch>
                 <Redirect from="/v3/folders/:id" to="/v3/folders/:id/summary" />
                 <Route path="/v3/folders/:id/summary" component={FolderSummaryContainer} />
                 {/* STUF */}
             </Switch>
            </div>
         )
    }
}