React Router 条件导航：从列表页到详情页的优化实践

// 路由配置片段
<Route path="/persons/:personId?" element={<Persons />} />

// Persons 组件内部
const { personId } = useParams();
const persons = /* 通过服务调用获取人员数据 */;

useEffect(() => {
    // 检查是否在根路径且只有一人
    if (!personId && persons.length === 1) {
      // 尝试导航，但这可能导致“Too many re-renders”
      useNavigate()(useLocation().pathname + "/" + persons[0].id);
    }
}, [personId, persons]); // 依赖项应包含personId和persons

import { Routes, Route } from 'react-router-dom';
import PersonList from './PersonList';      // 负责列表展示和条件跳转
import PersonDetails from './PersonDetails'; // 负责详情展示

function AppRoutes() {
  return (
    <Routes>
      <Route path="/persons" element={<PersonList />} />
      <Route path="/persons/:personId" element={<PersonDetails />} />
      {/* 其他路由 */}
    </Routes>
  );
}

export default AppRoutes;

import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
// 假设有一个服务来获取人员数据
import { getPersons } from './services/personService'; 

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

  useEffect(() => {
    const fetchPersons = async () => {
      setLoading(true);
      const data = await getPersons(); // 模拟数据获取
      setPersons(data);
      setLoading(false);
    };

    fetchPersons();
  }, []); // 仅在组件挂载时获取数据

  // 在渲染逻辑中进行条件判断和导航
  if (loading) {
    return <div>加载中...</div>;
  }

  if (persons.length === 1) {
    // 如果只有一名人员，直接导航到其详情页
    // 注意：这里不需要使用useEffect，直接在渲染逻辑中判断并导航
    // navigate('/persons/' + persons[0].id, { replace: true });
    // 或者更灵活地使用当前路径
    navigate(`${window.location.pathname}/${persons[0].id}`, { replace: true });
    return null; // 导航后不渲染任何内容
  }

  if (persons.length === 0) {
    return <div>没有人员数据。</div>;
  }

  // 如果有多名人员，则渲染列表
  return (
    <div>
      <h1>人员列表</h1>
      <ul>
        {persons.map(person => (
          <li key={person.id}>
            <a onClick={() => navigate(`/persons/${person.id}`)} style={{ cursor: 'pointer' }}>
              {person.name}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default PersonList;

import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { getPersonDetails } from './services/personService'; // 假设有获取详情的服务

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

  useEffect(() => {
    if (personId) {
      const fetchDetails = async () => {
        setLoading(true);
        setError(null);
        try {
          const data = await getPersonDetails(personId); // 模拟获取详情
          setPerson(data);
        } catch (err) {
          setError('无法加载人员详情。');
        } finally {
          setLoading(false);
        }
      };
      fetchDetails();
    }
  }, [personId]); // 当personId变化时重新获取详情

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

  if (error) {
    return <div>错误：{error}</div>;
  }

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

  return (
    <div>
      <h1>{person.name} 的详情</h1>
      <p>ID: {person.id}</p>
      <p>年龄: {person.age}</p>
      <p>邮箱: {person.email}</p>
      {/* 更多详情 */}
    </div>
  );
}

export default PersonDetails;