reactjs - 如何仅在react-router-dom中通过slug路由访问不同的组件？

Question

假设我们有 Post 和 Project 两个组件。每个帖子和项目都有 slug。我想通过 slug 访问帖子和项目。所以我们有路线:

<Route path="/:post_slug" component={PostComponent} />
<Route path="/:project_slug" component={ProjectComponent} />

例如，当您访问某个后期公关项目时，会调用一个操作来通过参数获取其数据。像这样的事情:

this.props.fetchPost(this.props.match.params.post_slug)
this.props.fetchProject(this.props.match.params.project_slug)

如果我只做一个只能通过 slug 访问的组件，那么它就可以工作。但如果我想通过 slug 访问两个不同的组件，那就很困惑了。即当我访问帖子时，React 认为我正在访问项目。

也许在react-router-dom中有某种方法可以处理这种情况？

Answer 1

没有办法做到这一点，因为路由器无法区分两条路由。例如，如果我要导航到 site.com/my_slug，路由器将不知道 my_slug 是否应该是 :post_slug > 或 :project_slug。当它们都存在时，它会将您发送到一个项目，因为它将它们解释为相同的路线，因此它使用您定义的最后一个。

您可以尝试的另一种选择是使您的路线更加明确，如下所示:

<Route path="/post/:post_slug"       component={PostComponent} />
<Route path="/project/:project_slug" component={ProjectComponent} />