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

Question

我试图在我的 react 应用程序中使用单独的路线但使用相同的组件来添加/编辑表单，如下所示:

<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 发生变化，但该组件不会重新加载，因此仍保留在编辑页面上。

有办法解决这个问题吗？

Answer 1

对每个路由使用不同的key应该强制组件重建:

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

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