Question

当我尝试重定向到嵌套的网址时，它似乎进入无限循环。

<Router history={browserHistory}>
  <Route path="/nse" component={App} />
</Router>

在App组件中，

if(visibleContainerProp == 4){          
  return <Redirect to={`${match.url}/stockdetails/${searchticker}`} />
}

这里，visibleContainerProp是从文档中提到的状态读取的 https://reacttraining.com/react-router/web/example/auth-workflow

每次用户从搜索框中选择一个代码并尝试重定向到上面的网址时，我都会将visibleContainerProp设置为4。但它失败了。

在浏览器中，我看到网址http://127.0.0.1:8000/nse/stockdetails/BBTC，在控制台中我看到它尝试加载几次并以警告结束

Warning: You tried to redirect to the same route you're currently on: "/nse/stockdetails/BBTC"

但是，如果我通过应用程序组件直接转到没有重定向的URL，它就能完美运行。在App组件中，我有以下内容。

<Switch>
  <Route path={`${match.url}/index`} component={AIContainer}/>
  <Route path={`${match.url}/equity`} component={EQContainer}/>
  <Route path={`${match.url}/quickstats`} component={StatsContainer}/>
  <Route path={`${match.url}/stockdetails/:ticker`} component={StockSearchDetails}/>
  <Route component={ScreenContainer}/>
</Switch>

我知道文档中的示例不使用重定向到嵌套路由。这可能吗？

由于

Answer 1

是的，它是无限循环，因为您没有将visibleContainerProp重置为其他值。它坚持使用4。

而不是

if(visibleContainerProp == 4){          
  return <Redirect to={`${match.url}/stockdetails/${searchticker}`} />
}

首先发送一个动作，重置visibleContainerProp

if(visibleContainerProp == 4){          
       dispatch({ type : 'UPDATE_MY_PARAM_TO_RESET_REDIRECTION'})
      return <Redirect to={`${match.url}/stockdetails/${searchticker}`} />
}

在App组件中，通过visibleContainerProp阅读mapStateToProps，这将有助于您进行管理 visibleContainerProp==4条件并避免循环重定向。

编辑：

调度操作redirectAction。根据您的要求，通过检查条件if(visibleContainerProp == 4)

，从适当的组件生命周期调用它

redirectAction(redirectUrl){

          /this will update `visibleContainerProp` to some other value
         dispatch({ type : 'UPDATE_MY_PARAM_TO_RESET_REDIRECTION'});
         //create history object and push the next url
         history.push(`${match.url}/stockdetails/${searchticker}`);
}

使用react-router v4重定向到嵌套路由

1 个答案: