问题

Question

我正在从 The Guardian API 获取新闻文章。文章 id 是这样的：“world/live/2020/dec/31/coronavirus-covid-live-news-updates-vaccine-lockdown”

我需要从文章摘要转到文章详细信息，为此我正在使用 React Router。如果我使用 const { id } = useParams(); 并在控制台记录它，它只会从 id 中获取“world”。如何获取完整 ID？

<Route path="/:id" component={ArticlePage} />

    {topStories.map((story) => (
      <Link to={`/${story.id}`}>
        <ImageCard key={story.id} story={story} />
      </Link>
    ))}

Answer 1

问题

路径 "/:id" 将只匹配第一个路径“段”，即来自 "world/live/2020/dec/31/coronavirus-covid-live-news-updates-vaccine-lockdown" 的“世界”。

解决方案

如果路径是 "world/live/2020/dec/31/coronavirus-covid-live-news-updates-vaccine-lockdown" 并且您尝试获取 coronavirus-covid-live-news-updates-vaccine-lockdown 作为 ID，那么您需要定义一个与您要提取的内容匹配的路由路径。

类似的东西

<Route path="/world/live/:year/:month/:day/:id" component={ArticlePage} />

现在使用参数，您可以提取任何这些参数，包括 id。

const { day, id, month, year } = useParams();

使用 useParams 获取 Url 类型 ID（反应路由器）

1 个答案:

问题

解决方案