React中具有不同组件的相同路径路径

Question

我需要一个View组件和一个Edit组件。取决于条件，按钮需要进入查看页面或编辑页面。

我设置了如下的路线。 问题是路径是一样的。

<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

我认为这是正确的决定

url

但通常的做法是让CRUD以这种方式定义路线

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

Answer 2

您应该像使用/ view后缀一样建议，但我建议将/users/:user_id与Users.View组件合并，/users/:user_id/edit与Users.Edit合并零件。

根据条件无法处理1个确切网址的原因是，当您打开该网址时，如果说是电子邮件，则无法确定要呈现哪个组件。

有一种方法，但它比仅添加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查询您要显示的组件来管理您的决定。