Question

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

我的React Component的render方法：

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"

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

或使用Switch

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

React Router，如何将路由重定向到其子路由？

1 个答案: