React 中不同组件的相同路由路径

Question

我需要一个视图组件和一个编辑组件。根据情况，需要有一个按钮进入“查看”页面或“编辑”页面。

我设置了如下所示的路线。问题是路径是相同的。

<Route exact path='/users/:user_id' component={Users.Edit} />
<Route exact path='/users/:user_id' component={Users.View} />

在页面中，我有如下链接

(type = "A") ? <Link to="users/1">view</Link> : <Link to="users/1">edit</Link>

目前，路由器具有相同的路径，因此按钮将转到“编辑”组件。

有什么好的反应方式可以调用编辑组件或查看组件吗？或者我需要像下面这样吗？

<Route exact path='/users/:user_id' component={Users.Edit} />
<Route exact path='/users/:user_id/view' component={Users.View} />

Answer 1

您应该按照您建议的 /view 后缀进行操作，但我建议将/users/:user_id与Users.View组件结合起来，并将/users/:user_id/edit与Users.Edit组件结合起来。

无法根据条件处理 1 个确切 url 的原因是，当您从电子邮件中打开该 url 时，无法判断要呈现哪个组件。

有一种方法，但比只添加 2 条路由更难。

您可能希望将查看/编辑决策更改为 1 个路由上的查询参数，但随后您必须创建一个新的包装器组件Users.Edit并Users.View根据查询参数处理决策。所以你的路线应该是这样的

<Route exact path='/users/:user_id' component={Users.EditOrViewDecision} />

接下来，您可以通过将搜索传递给Link

<Link to={{
  pathname: '/users/1',
  search: '?view=edit'
}}/>

但这样您仍然必须根据EditOrViewDecision查询来管理?view=edit您要显示哪个组件的决定。