使用从 API 获取的数据在 REACT.js 中进行动态路由答案

【问题标题】：Dynamic Routing in REACT.js using data fetched from an API使用从 API 获取的数据在 REACT.js 中进行动态路由
【发布时间】：2023-01-25 00:21:11
【问题描述】：

在过去的几个月里，我一直在使用 REACT.js 开发一个复杂的应用程序，并且遇到了一个问题，尽管进行了广泛的研究和实验，但我仍然无法解决。

问题是我正在尝试在我的应用程序中实现动态路由，其中路由由从 API 获取的数据确定。我一直在使用 react-router-dom 库来处理我的路由，并成功实现了静态路由。但是，当我尝试根据从 API 获取的数据使用动态路由时，应用程序会抛出错误。

我尝试了几种不同的方法来解决这个问题，包括使用 useEffect 钩子来获取数据和更新路由，以及使用诸如 react-dynamic-route 之类的库来处理动态路由。但是，我无法使这些方法中的任何一种起作用。

这是我当前用于获取数据和更新路由的代码示例：

import { useEffect, useState } from 'react';
import { fetchData } from './api';
import {
  BrowserRouter as Router,
  Route,
  Switch,
  useLocation
} from 'react-router-dom';

const App = () => {
  const [data, setData] = useState([]);
  const location = useLocation();

  useEffect(() => {
    const fetchAPI = async () => {
      setData(await fetchData());
    };
    fetchAPI();
  }, [location]);

  return (
    <Router>
      <Switch>
        {data.map((item) => (
          <Route key={item.id} path={`/${item.id}`} component={DetailPage} />
        ))}
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
};

导出默认应用程序；对于如何使用从 API 获取的数据在 REACT.js 应用程序中正确实现动态路由的任何见解或建议，我将不胜感激。任何帮助将不胜感激。谢谢你。

【问题讨论】：

您是否从旧网站帖子或其他内容中复制了此代码？我很确定 switch 已经不存在了。还有其他一些看起来很奇怪的东西，但是如果这只是从一些旧帖子中复制的，我可以举一个例子来说明如何编写它，这样它就可以工作

标签： javascript reactjs dom

【解决方案1】：

我认为您的代码中有几处是不正确的。首先Switch 已经过时了，如果你使用的是react-router-dom 的旧版本，你可以使用它，而不是使用Routes。我相信 component 属性在 v5.1 之前被弃用并且不能用于较新版本的 React，而是使用 element 属性。同样重要的是要注意这个属性需要在标签中有名称。

<Route
    key={item.id}
    path={`/${item.id}`}
    element={<DetailPage />}
/>

另外 useLocation 只能在路由器的上下文中使用，这意味着它可以在您要路由到的元素之一中使用，但除非您有 App 组件的路由，否则它将无法工作。我做了一个小示例来展示您的代码如何使其工作。

import { useEffect, useState } from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

const App = () => {
    const [data, setData] = useState([]);

    useEffect(() => {
        fetch('http://localhost:3000/testItems')
            .then((res) => res.json())
            .then((res) => setData(res));
    }, []);

    return (
        <Router>
            <Routes>
                {data.map((item: { id: number; idk: string }) => (
                    <Route
                        key={item.id}
                        path={`/${item.id}`}
                        element={<Comp />}
                    />
                ))}
                <Route element={<p>This seems wrong</p>} />
            </Routes>
        </Router>
    );
};

export default App;

function Comp() {
    return <div>Hello</div>;
}

我已经使用本地服务器测试了代码以进行提取。服务器有以下数据。

{
    "testItems": [
        {
            "id": 1,
            "idk": "other stuff"
        },
        {
            "id": 2,
            "idk": "not good at naming stuff"
        }
    ]
}

【讨论】：