如何在React+Vite中通过vite-plugin-pages配置404页面跳转

步骤1：安装依赖 #

先装vite-plugin-pages和react-router-dom（插件依赖React Router管理路由）：

npm install vite-plugin-pages react-router-dom
# 也可以用yarn/pnpm
# yarn add vite-plugin-pages react-router-dom
# pnpm add vite-plugin-pages react-router-dom

步骤2：配置Vite插件 #

在vite.config.ts里启用vite-plugin-pages，指定pages目录（默认是src/pages，可省略）：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import Pages from 'vite-plugin-pages'

export default defineConfig({
  plugins: [
    react(),
    Pages({
      dirs: 'src/pages',
      extensions: ['tsx', 'jsx'], // 支持的页面文件后缀
    }),
  ],
})

步骤3：创建404页面 #

在src/pages目录下新建404.tsx文件：

const NotFound = () => {
  return (
    <div style={{ padding: '2rem', textAlign: 'center' }}>
      <h1>404 - 页面不存在</h1>
      <p>您访问的路径不存在，请返回首页</p>
    </div>
  )
}

export default NotFound

步骤4：配置路由匹配规则 #

在主路由入口文件（比如src/App.tsx或src/main.tsx）里，用React Router的Routes渲染自动生成的路由，最后添加通配符路由处理未匹配的路径：

方式1：直接渲染404组件

import React from 'react'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import { useRoutes } from 'vite-plugin-pages/client'
import NotFound from './pages/404'

const App = () => {
  const autoRoutes = useRoutes()
  return (
    <Router>
      <Routes>
        {/* 渲染vite-plugin-pages自动生成的路由 */}
        {autoRoutes}
        {/* 匹配所有未定义的路径，直接渲染404组件 */}
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  )
}

export default App

方式2：重定向到/404路径

如果希望地址栏显示/404而不是保持原路径，用Navigate组件做重定向：

import React from 'react'
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
import { useRoutes } from 'vite-plugin-pages/client'

const App = () => {
  const autoRoutes = useRoutes()
  return (
    <Router>
      <Routes>
        {autoRoutes}
        {/* 重定向所有未匹配路径到/404 */}
        <Route path="*" element={<Navigate to="/404" replace />} />
      </Routes>
    </Router>
  )
}

export default App

这样一来，当用户访问pages文件夹中没有对应文件的路径时，就会自动触发404页面的展示或重定向。

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