在源自 React 中同一路由的两条不同路由上获取两个不同的 APIS

Question

到目前为止，我实现了一条路线 (url "/")，它从 API（5000 个对象）中获取所有数据，并为每个对象显示自己的卡片 (m-ui).

当我点击其中一张卡片中的按钮时，我被转到另一条路线（“/card/id），它显示了相应卡片的特定属性

回到（“/”），我想实现当我点击卡片中的另一个按钮时，我被转发到一个路由（“/post/id”），它也显示特定数据, 但来自另一个 API.

但是，到目前为止，我无法从那个新的 API 中获取任何数据，当我点击提到的按钮时，我只得到一个空白页面和一个不执行任何操作的控制台。

显示了我希望路由在图表中的工作方式，它看起来像他的：

API一个-->APIA/id API一个-->APIB/id

希望这是可以理解的，如果有任何提示，我将不胜感激。也许我缺少路由的一些基本功能。谢谢。

Answer 1

任何 React 路由器库都应该为您提供一个参数值，您可以使用该参数值来获取所需的 api 端点。

您的 / 正在获取所有卡片
/card/:id 路由应该匹配一个组件，该组件将为您提供可用的 id，例如，如果您使用的是 react router，则可以获得您需要的 id https://v5.reactrouter.com/web/example/url-params

也来自 React 路由器文档

import React from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  useParams
} from "react-router-dom";
// here you can make your API call to get the card by id 
function BlogPost() {
  let { slug } = useParams();
  return <div>Now showing post {slug}</div>;
}

ReactDOM.render(
  <Router>
    <Switch>
      <Route exact path="/">
        <HomePage />
      </Route>
      <Route path="/blog/:slug">
        <BlogPost />
      </Route>
    </Switch>
  </Router>,
  node
);

}

在源自 React 中同一路由的两条不同路由上获取两个不同的 APIS

Fetching two different APIS on two differents routes originating from same route in React

routes

reactjs