求助：React.js基于API数据实现动态路由的问题

你的代码存在的核心问题 #

• useLocation钩子必须在Router组件内部使用，你在App组件顶层直接调用该钩子时，组件还未被Router包裹，会触发上下文不存在的错误。
• 依赖location触发API请求会导致路由变化时重复发起请求，这并非必要逻辑（除非路由数据需随位置动态更新）。
• 代码中未导入DetailPage和NotFound组件，会引发未定义错误。

正确实现方式 #

方案1：基于API数据生成多个路由（适合路由数量较少的场景） #

调整组件结构，确保路由钩子在Router上下文内使用，同时优化API请求逻辑：

import { useEffect, useState } from 'react';
import { fetchData } from './api';
import {
  BrowserRouter as Router,
  Route,
  Switch,
} from 'react-router-dom';
// 记得导入你的业务组件
import DetailPage from './DetailPage';
import NotFound from './NotFound';

const App = () => {
  const [routesData, setRoutesData] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  // 初始化时一次性获取路由数据，无需依赖location
  useEffect(() => {
    const getRoutes = async () => {
      try {
        const data = await fetchData();
        setRoutesData(data);
      } catch (err) {
        console.error('获取路由数据失败:', err);
      } finally {
        setIsLoading(false);
      }
    };
    getRoutes();
  }, []);

  if (isLoading) {
    return <div>加载中...</div>; // 增加加载状态提示
  }

  return (
    <Router>
      <Switch>
        {routesData.map((item) => (
          <Route 
            key={item.id} 
            path={`/${item.id}`} 
            exact // 开启精确匹配，避免路由冲突
            render={() => <DetailPage item={item} />} 
          />
        ))}
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
};

export default App;

方案2：使用动态路由参数（更高效，适合大量路由场景） #

无需生成多个Route组件，只需定义一条带参数的路由，在详情组件内部根据参数获取对应数据：

import { useState, useEffect } from 'react';
import {
  BrowserRouter as Router,
  Route,
  Switch,
  useParams,
} from 'react-router-dom';
import { fetchItemById } from './api'; // 新增根据ID获取单条数据的API
import DetailPage from './DetailPage';
import NotFound from './NotFound';
import Home from './Home'; // 首页组件

// 封装带数据请求的详情页组件
const DynamicDetailPage = () => {
  const { id } = useParams();
  const [item, setItem] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const getItem = async () => {
      try {
        const data = await fetchItemById(id);
        setItem(data);
      } catch (err) {
        setError('获取数据失败');
        console.error(err);
      } finally {
        setIsLoading(false);
      }
    };
    getItem();
  }, [id]);

  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>{error}</div>;
  if (!item) return <NotFound />;

  return <DetailPage item={item} />;
};

const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/:id" component={DynamicDetailPage} />
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
};

export default App;

关键注意事项 #

• 所有路由相关钩子（useLocation、useParams等）必须在Router的子组件中使用。
• 必须处理加载、错误状态，避免用户看到空白或报错界面。
• 使用Switch时，注意路由匹配顺序：更具体的路由放在通用路由前面，或通过exact属性控制精确匹配。
• 若路由数据需动态更新，可添加对应的状态监听逻辑重新获取数据。

内容的提问来源于stack exchange，提问作者Nuro007