在react-router v4中为不同的路由路径使用相同的组件

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在尝试使用单独的路线，但在我的React App中添加/编辑表单的组件相同，如下所示：

<Switch>
        <Route exact path="/dashboard" component={Dashboard}></Route>
        <Route exact path="/clients" component={Clients}></Route>
        <Route exact path="/add-client" component={manageClient}></Route>
        <Route exact path="/edit-client" component={manageClient}></Route>        
        <Route component={ NotFound } />        
</Switch>

现在，在manageClient组件中，我解析查询参数（我在编辑路由中传递带有客户端ID的查询字符串），并根据传递的查询参数有条件地进行渲染。

问题在于这不会再次重新安装整个组件。假设打开了一个编辑页面，并且用户单击添加组件，URL发生了更改，但是该组件没有重新加载，因此保留在编辑页面上。

有办法解决吗？

回答：

key对每个路径使用不同的值将强制组件进行重建：

    <Route 
      key="add-client"
      exact path="/add-client"
      component={manageClient} 
    />
    <Route 
      key="edit-client"
      exact path="/edit-client"
      component={manageClient} 
    />

以上是 在react-router v4中为不同的路由路径使用相同的组件 的全部内容， 来源链接： utcz.com/qa/409805.html

回到顶部