REACT.js 中的动态路由使用从 API 获取的数据

Question

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

问题是我正在尝试在我的应用程序中实现动态路由，其中路由由从 API 获取的数据确定。我一直在使用 react-router-dom 库来处理我的路由，并成功实现了 static路线。 但是，当我尝试使用基于从 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 应用程序中正确实现动态路由的任何见解或建议，我将不胜感激。任何帮助将不胜感激。 谢谢你。

Answer 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"
        }
    ]
}