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

Posted 2021-04-16

让我们说我们有两个组件用于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中处理这种情况？

答案

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

您可以尝试的另一种方法是更明确地使用您的路线，如下所示：

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

另一答案

如果将检测逻辑放在另一个组件中，则可以执行此操作，如下所示：

<Route path="/:any_slug" component={AnyComponent} />

然后让该组件确定您拥有的ID类型并相应地呈现所需的子组件：

const AnyComponent = props => {
    if (slugIsProject(props.match.params.any_slug)) {
        return <ProjectComponent id={props.match.params.any_slug} />;
    } else {
        return <PostComponent id={props.match.params.any_slug} />;
    }
}

这样路由器总是呈现相同的组件（AnyComponent），但该组件的显示方式不同，具体取决于ID的确定。