在 react-router v4 中为不同的路由路径使用相同的组件
[英]using same component for different route path in react-router v4
问题描述
I am trying to have separate routes but same component for add/edit forms in my react app like the below:
我正在尝试在我的 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>
Now in the manageClient component, I parse the query params (I pass in a query string with client id in edit route), I render conditionally based on the query param passed.现在在 manageClient 组件中，我解析查询参数（我在编辑路由中传入一个带有客户端 ID 的查询字符串），我根据传递的查询参数有条件地呈现。
The problem is that this doesn't remount the whole component again.问题是这不会再次重新安装整个组件。 Say an edit page is opened, and the user clicks on add component, the URL changes, but the component doesn't reload and hence remains on the edit page.假设打开了一个编辑页面，用户单击添加组件，URL 更改，但组件不会重新加载，因此保留在编辑页面上。
Is there a way to handle this?有没有办法处理这个问题？
5 个解决方案
解决方案1
68 已采纳 2018-02-27 04:32:09
I am trying to have separate routes but same component for add/edit forms in my react app like the below:我试图在我的反应应用程序中使用单独的路由但相同的组件来添加/编辑表单，如下所示：
<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>
Now in the manageClient component, I parse the query params (I pass in a query string with client id in edit route), I render conditionally based on the query param passed.现在在 manageClient 组件中，我解析查询参数（我在编辑路由中传入一个带有客户端 ID 的查询字符串），我根据传递的查询参数有条件地呈现。
The problem is that this doesn't remount the whole component again.问题是这不会再次重新安装整个组件。 Say an edit page is opened, and the user clicks on add component, the URL changes, but the component doesn't reload and hence remains on the edit page.假设打开了一个编辑页面，用户单击添加组件，URL 更改，但组件不会重新加载，因此保留在编辑页面上。
Is there a way to handle this?有没有办法处理这个问题？
解决方案2
8 2018-02-27 04:34:28
I am trying to have separate routes but same component for add/edit forms in my react app like the below:我试图在我的反应应用程序中使用单独的路由但相同的组件来添加/编辑表单，如下所示：
<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>
Now in the manageClient component, I parse the query params (I pass in a query string with client id in edit route), I render conditionally based on the query param passed.现在在 manageClient 组件中，我解析查询参数（我在编辑路由中传入一个带有客户端 ID 的查询字符串），我根据传递的查询参数有条件地呈现。
The problem is that this doesn't remount the whole component again.问题是这不会再次重新安装整个组件。 Say an edit page is opened, and the user clicks on add component, the URL changes, but the component doesn't reload and hence remains on the edit page.假设打开了一个编辑页面，用户单击添加组件，URL 更改，但组件不会重新加载，因此保留在编辑页面上。
Is there a way to handle this?有没有办法处理这个问题？
解决方案3
0 2020-05-13 12:56:56
I am trying to have separate routes but same component for add/edit forms in my react app like the below:我试图在我的反应应用程序中使用单独的路由但相同的组件来添加/编辑表单，如下所示：
<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>
Now in the manageClient component, I parse the query params (I pass in a query string with client id in edit route), I render conditionally based on the query param passed.现在在 manageClient 组件中，我解析查询参数（我在编辑路由中传入一个带有客户端 ID 的查询字符串），我根据传递的查询参数有条件地呈现。
The problem is that this doesn't remount the whole component again.问题是这不会再次重新安装整个组件。 Say an edit page is opened, and the user clicks on add component, the URL changes, but the component doesn't reload and hence remains on the edit page.假设打开了一个编辑页面，用户单击添加组件，URL 更改，但组件不会重新加载，因此保留在编辑页面上。
Is there a way to handle this?有没有办法处理这个问题？
解决方案4
0 2020-06-17 15:17:58
I am trying to have separate routes but same component for add/edit forms in my react app like the below:我试图在我的反应应用程序中使用单独的路由但相同的组件来添加/编辑表单，如下所示：
<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>
Now in the manageClient component, I parse the query params (I pass in a query string with client id in edit route), I render conditionally based on the query param passed.现在在 manageClient 组件中，我解析查询参数（我在编辑路由中传入一个带有客户端 ID 的查询字符串），我根据传递的查询参数有条件地呈现。
The problem is that this doesn't remount the whole component again.问题是这不会再次重新安装整个组件。 Say an edit page is opened, and the user clicks on add component, the URL changes, but the component doesn't reload and hence remains on the edit page.假设打开了一个编辑页面，用户单击添加组件，URL 更改，但组件不会重新加载，因此保留在编辑页面上。
Is there a way to handle this?有没有办法处理这个问题？
解决方案5
0 2021-11-21 11:06:54
您可以简单地在单个路由标记中提供一组路径，如下所示 -
<Route exact path={["/add-client", "/edit-client"]} component={manageClient}></Route>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.