Question

让我们说Post和Project有两个组件。每个帖子和项目都有slu。我想通过slug访问帖子和项目。所以我们有路线：

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

例如，当您访问某个post pr项目时，会调用一个操作来获取params的数据。像这样：

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} />

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

1 个答案: