在react-router v4

Question

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

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

这是我的反应路由器配置（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返回代码本身

中拥有路由配置然后defiend

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