React路由器，如何将路由重定向到其子路由？答案

【问题标题】：React router, how to redirect a route to its sub route?React路由器，如何将路由重定向到其子路由？
【发布时间】：2018-06-20 17:34:11
【问题描述】：

如何将路由重定向到其子路由？ '/charts' 路由没有要显示的组件，但它的子路由 '/charts/:itemId' 每个都有不同的图表要显示。如何将路由重定向到其第一个子路由？我所做的是直接使用<Redirect />，但最后显示错误：

我的 react Component 的渲染方法：

render() {
<Router>
...
 <div id='content' className='col-md-10 container'>
              <Redirect from="/charts" to="/charts/item_1"/>
              <Route path="/charts/:categoryId" component={MyChart} />
            </div>
...
</Router>
}

这会报错：

index.js:2178 Warning: You tried to redirect to the same route you're currently on: "/charts/:itemId"

【问题讨论】：

我会在组件链的更高层定义你的路由，就像在 App 组件中一样，这样它们就可以保持井井有条。您的 <Redirect /> 组件应该仅在您想要重定向它们时呈现。所以你需要有条件地应用它。阅读文档并查找示例。一般来说，如果我使用<Redirect />，它是唯一呈现的东西。 reacttraining.com/react-router

标签： reactjs react-router

【解决方案1】：

您使用的Redirect 没有exact 关键字或Switch，在这种情况下，每次您重定向到"/charts/:categoryId" 时，它都会匹配/charts 并因此再次重定向，您可以使用exact 道具，例如

render() {
    return(
        <Router>
        ...
         <div id='content' className='col-md-10 container'>
                      <Redirect exact from="/charts" to="/charts/item_1"/>
                      <Route path="/charts/:categoryId" component={MyChart} />
                    </div>
        ...
        </Router>
    )
}

或使用开关

render() {
    return(
        <Router>
        ...
         <div id='content' className='col-md-10 container'>
                   <Switch>
                      <Route path="/charts/:categoryId" component={MyChart} />
                      <Redirect from="/charts" to="/charts/item_1"/>
                   </Switch>
                    </div>
        ...
        </Router>
    )
}

【讨论】：