如何使用react-router-dom实现条件式页面导航与参数传递

import React from 'react';
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 } from 'react-router-dom';

function PersonList() {
  const [persons, setPersons] = useState([]);
  const [loading, setLoading] = useState(true);
  const navigate = useNavigate(); // 获取导航函数

  useEffect(() => {
    // 模拟异步获取人员数据
    const fetchPersons = async () => {
      setLoading(true);
      try {
        // 假设这里通过API调用获取数据
        const data = await new Promise(resolve => setTimeout(() => {
          // 模拟只有一位人员的情况
          // resolve([{ id: 'p1', name: 'Alice' }]);
          // 模拟多位人员的情况
          resolve([{ id: 'p1', name: 'Alice' }, { id: 'p2', name: 'Bob' }]);
        }, 500));
        setPersons(data);
      } catch (error) {
        console.error("Failed to fetch persons:", error);
      } finally {
        setLoading(false);
      }
    };

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

  useEffect(() => {
    // 只有当数据加载完成且存在人员时才进行判断
    if (!loading && persons.length > 0) {
      if (persons.length === 1) {
        // 如果只有一位人员，直接导航到其详情页
        navigate(`/persons/${persons[0].id}`);
      }
    }
  }, [loading, persons, navigate]); // 依赖于 loading, persons 和 navigate

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

  if (persons.length === 0) {
    return <div>暂无人员信息。</div>;
  }

  // 如果有多位人员，则渲染列表
  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 时已导航
  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 fetchPersonDetail = async () => {
        setLoading(true);
        try {
          // 模拟异步获取人员详情数据
          const data = await new Promise(resolve => setTimeout(() => {
            // 假设这里通过API调用获取特定personId的数据
            const mockPersons = [
              { id: 'p1', name: 'Alice', age: 30, city: 'New York' },
              { id: 'p2', name: 'Bob', age: 25, city: 'London' }
            ];
            resolve(mockPersons.find(p => p.id === personId));
          }, 300));
          setPerson(data);
        } catch (error) {
          console.error(`Failed to fetch person ${personId}:`, error);
        } finally {
          setLoading(false);
        }
      };
      fetchPersonDetail();
    }
  }, [personId]); // 依赖于 personId，当personId变化时重新获取数据

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

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

  return (
    <div>
      <h1>人员详情</h1>
      <p>ID: {person.id}</p>
      <p>姓名: {person.name}</p>
      <p>年龄: {person.age}</p>
      <p>城市: {person.city}</p>
    </div>
  );
}

export default PersonDetails;