pages文件夹无index.jsx时，如何跳过错误页直接跳转至指定路由？

根据你遇到的问题，核心是根路径（/）没有对应的页面组件，导致启动时先触发错误页，之后才执行重定向。可以通过以下方式直接跳过错误页，直接跳转到指定路由：

情况1：使用React Router v6+ #

在路由配置中给根路径添加重定向规则，让访问/时直接跳转到/home：

import { Routes, Route, Navigate } from 'react-router-dom';
import HomePage from './pages/HomePage'; // 导入你的首页组件

function App() {
  return (
    <Routes>
      {/* 根路径直接重定向到/home */}
      <Route path="/" element={<Navigate to="/home" replace />} />
      {/* 配置你的目标路由 */}
      <Route path="/home" element={<HomePage />} />
      {/* 可选：处理所有未匹配的路径，统一跳转到首页 */}
      <Route path="*" element={<Navigate to="/home" replace />} />
    </Routes>
  );
}

export default App;

使用replace属性可以避免用户点击浏览器后退按钮时回到根路径再次触发重定向，优化体验。

情况2：使用Next.js Pages Router #

方法1：创建根页面做重定向 #

在pages文件夹下新建index.jsx，内部实现立即重定向：

// pages/index.jsx
import { useEffect } from 'react';
import { useRouter } from 'next/router';

export default function RootPage() {
  const router = useRouter();

  useEffect(() => {
    // 直接跳转到/home，replace避免历史记录冗余
    router.replace('/home');
  }, [router]);

  // 可以返回加载态，避免页面空白（可选）
  return <div>加载中...</div>;
}

方法2：配置Next.js服务端重定向 #

在next.config.js中添加重定向规则，服务端层面直接处理根路径跳转：

// next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/', // 匹配根路径
        destination: '/home', // 目标路由
        permanent: true, // 生产环境建议设为true（永久重定向），测试环境可设为false
      },
    ];
  },
};

以上两种方式都能确保用户访问根路径时直接跳转到目标页面，不会看到错误页。

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