React Router V6页面加载自动重定向：非点击调用navigate

首先优化你的训练师数据处理逻辑，直接修改原数组并添加key的方式不够规范，key应在渲染列表时指定（优先用数据唯一标识而非索引）。可以用数组map方法生成处理后的数据：

// 假设trainer是原始数据数组
const processedTrainers = trainer.map(item => ({
  ...item,
  link: `/trainer/${item.firstName.toLowerCase()}-${item.lastName.toLowerCase()}`
}));

接下来解决根路径自动重定向问题，React Router V6提供两种简便实现方式：

方式一：使用<Navigate>组件（声明式，推荐） #

在路由配置或根组件中，根据当前路径做条件渲染：

import { Navigate, useLocation } from 'react-router-dom';

function RootRedirect() {
  const location = useLocation();
  
  // 仅在根路径且有训练师数据时重定向，避免无限循环或空数组报错
  if (location.pathname === '/' && processedTrainers.length > 0) {
    return <Navigate to={processedTrainers[0].link} replace />;
  }
  
  // 非根路径或无数据时，渲染你的选择组件
  return <YourSelectComponent trainers={processedTrainers} />;
}

将该组件配置到路由的/路径下：

import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Routes>
      <Route path="/" element={<RootRedirect />} />
      {/* 其他路由配置 */}
      <Route path="/trainer/:trainerSlug" element={<TrainerDetail />} />
    </Routes>
  );
}

方式二：使用useNavigate钩子（命令式） #

如果需要在组件内触发导航，可结合useEffect在组件挂载时检查路径并跳转：

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

function YourSelectComponent() {
  const navigate = useNavigate();
  const location = useLocation();
  const processedTrainers = trainer.map(item => ({
    ...item,
    link: `/trainer/${item.firstName.toLowerCase()}-${item.lastName.toLowerCase()}`
  }));

  useEffect(() => {
    // 页面加载时判断路径，满足条件则跳转
    if (location.pathname === '/' && processedTrainers.length > 0) {
      navigate(processedTrainers[0].link, { replace: true });
    }
  }, [location.pathname, processedTrainers, navigate]);

  // 渲染选择组件逻辑
  return (
    <div>
      {processedTrainers.map(trainer => (
        <a 
          key={trainer.id || `${trainer.firstName}-${trainer.lastName}`} 
          href={trainer.link}
        >
          {trainer.firstName} {trainer.lastName}
        </a>
      ))}
    </div>
  );
}

关键注意点： #

• 加replace: true可避免浏览器历史记录保留根路径，用户返回时不会回到/
• 必须判断processedTrainers.length > 0，防止数组为空时出现错误
• useNavigate只能在React组件或自定义Hook中使用，不能在普通函数直接调用，需结合useEffect在组件生命周期内触发

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