首页 文章

React Router V3 - 嵌套路由组件在路径参数更改时卸载

提问于
浏览 次
0

我只是注意到在反应路由器（v3.x）中，如果路径参数发生更改，组件将卸载并重新装入 . 这是预期的行为吗？

路线：

<Route path="/landing/register/:step" component={Register}/>

现在，让我说我在路线 "/landing/register/personal-data" 并且我通过 <Link/> 或 router.push({...}) 导航到下一个注册步骤 "/landing/register/address" ，首先卸载Register组件然后再次安装，失去其所有状态 .

这是正确的方法还是我做错了什么？

EDIT:

似乎问题是我使用嵌套路由，我在那里使用组件作为父路由 .

此示例有效（不在路径参数更改时重新安装Register-Comp）：

<Route path="/landing">
   <Route path="register/:step" component={Register}></Route>
</Route>

但是当我使用一个组件作为父路由时，它没有（不重新安装AppView-Comp，但路径参数更改时注册 - 补充）：

<Route path="/landing" component={AppView}>
   <Route path="register/:step" component={Register}></Route>
</Route>
javascript reactjs react-router

1 回答

  • 0

    我通过在子组件中嵌套路由来解决这个问题，如下所示：

    // Router class
 <Route path="/landing/register" component={Register}/>


 //Register component

 <BrowserRouter>
  <div> 
   <Route path="/landing/register/personal-data" component={PersonalData}/>
   <Route path="/landing/register/payment-data" component={PaymentData}/>
   ...other routes
  </div>
 </BrowserRouter>

    但在这种情况下，我将用户数据存储在redux存储而不是组件状态，但是您可以将它存储在组件状态，这不是问题 .

    回复于

相关问题