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

Posted 2023-02-22

【中文标题】如何仅在 react-router-dom 中通过带有 slug 的路由访问不同的组件？

【英文标题】：How to access different components by routes with slug only in react-router-dom?

【发布时间】：2018-05-04 08:39:15

【问题描述】：

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

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

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

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

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

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

【参考方案1】：

如果您将检测逻辑放在另一个组件中，您可以这样做，如下所示：

<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。

【参考方案2】：

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

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

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

【讨论】：

非常感谢您的回答。是的，我同意更明确的路线。但仍在努力使其发挥作用。如果我用withRouter 包装我的根组件，那么我会在this.props.match 中获得有关我的参数的信息。我会尝试制作某种处理程序来检查通过了什么 slug。

@Dair，如果它回答了你的问题，你应该接受它。