如何使用React Router实现条件式详情页导航

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import PersonList from './PersonList';
import PersonDetails from './PersonDetails';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* 列表页路由，不带参数 */}
        <Route path="/persons" element={<PersonList />} />
        {/* 详情页路由，带 personId 参数 */}
        <Route path="/persons/:personId" element={<PersonDetails />} />
        {/* 其他路由... */}
      </Routes>
    </BrowserRouter>
  );
}

export default App;

import React, { useEffect, useState } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';

function PersonList() {
  const [persons, setPersons] = useState([]);
  const [loading, setLoading] = useState(true);
  const navigate = useNavigate();
  const location = useLocation();

  useEffect(() => {
    // 模拟异步数据获取
    const fetchPersons = async () => {
      setLoading(true);
      try {
        // 假设这里调用API获取数据
        // 示例数据：
        const data = [
          // { id: '1', name: 'Alice' },
          // { id: '2', name: 'Bob' },
          // { id: '3', name: 'Charlie' },
        ]; // 模拟只有一个用户的情况，请取消注释上面三行或只留一行
        // const data = [{ id: '1', name: 'Alice' }]; // 模拟只有一个用户的情况
        // const data = []; // 模拟没有用户的情况
        setPersons(data);
      } catch (error) {
        console.error("Error fetching persons:", error);
      } finally {
        setLoading(false);
      }
    };

    fetchPersons();
  }, []); // 空依赖数组确保只在组件挂载时执行一次数据获取

  // 在数据加载完成后，执行条件式导航
  useEffect(() => {
    if (!loading && persons.length === 1) {
      // 构建目标URL：当前路径 + "/" + 唯一人员的ID
      const targetPath = `${location.pathname}/${persons[0].id}`;
      console.log(`Navigating to: ${targetPath}`);
      navigate(targetPath, { replace: true }); // 使用 replace 避免在历史记录中留下当前列表页
    }
  }, [loading, persons, navigate, location.pathname]); // 依赖项包含 loading, persons, navigate, location.pathname

  if (loading) {
    return <div>加载中...</div>;
  }

  if (persons.length === 0) {
    return <div>目前没有可用人员。</div>;
  }

  // 如果人员数量大于1，则渲染列表
  if (persons.length > 1) {
    return (
      <div>
        <h1>人员列表</h1>
        <ul>
          {persons.map(person => (
            <li key={person.id}>
              <a href={`/persons/${person.id}`}>{person.name}</a>
            </li>
          ))}
        </ul>
      </div>
    );
  }

  // 如果走到这里，说明 persons.length === 1 的情况已经被上面的 useEffect 处理了，
  // 此时组件会因为导航而卸载或切换到 PersonDetails 组件，所以这里不会被渲染。
  // 但为了代码的完整性，可以返回一个空或者加载状态，虽然理论上不会执行到。
  return null; 
}

export default PersonList;

import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';

function PersonDetails() {
  const { personId } = useParams(); // 从URL中获取 personId
  const [person, setPerson] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (personId) {
      const fetchPersonDetails = async () => {
        setLoading(true);
        try {
          // 模拟异步数据获取，根据 personId 调用API
          // 示例数据：
          const allPersons = [
            { id: '1', name: 'Alice', age: 30, city: 'New York' },
            { id: '2', name: 'Bob', age: 25, city: 'London' },
            { id: '3', name: 'Charlie', age: 35, city: 'Paris' },
          ];
          const foundPerson = allPersons.find(p => p.id === personId);
          setPerson(foundPerson);
        } catch (error) {
          console.error(`Error fetching person ${personId}:`, error);
        } finally {
          setLoading(false);
        }
      };
      fetchPersonDetails();
    }
  }, [personId]); // personId 变化时重新获取详情

  if (loading) {
    return <div>加载人员详情...</div>;
  }

  if (!person) {
    return <div>未找到人员信息。</div>;
  }

  return (
    <div>
      <h1>人员详情：{person.name}</h1>
      <p>ID: {person.id}</p>
      <p>年龄: {person.age}</p>
      <p>城市: {person.city}</p>
      {/* 更多详情信息 */}
    </div>
  );
}

export default PersonDetails;