React Router Dom V6部署netcup webhosting 1000遇路由404问题求助

问题根源 #

这是单页应用（SPA）部署的典型问题：React Router的BrowserRouter使用前端路由，当用户跳转至/about或刷新该页面时，服务器会尝试在文件系统中寻找/about对应的实体文件/目录，但你的部署文件只有index.html和静态资源，因此返回404错误。

解决方案 #

针对netcup Webhosting 1000，需配置服务器重写规则，让所有非静态资源请求都指向index.html，具体操作如下：

1. 创建/配置.htaccess文件 #

在服务器部署根目录（如htdocs）创建或编辑.htaccess文件，添加以下规则：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

规则作用：

• 开启URL重写引擎
• 跳过对index.html本身的重写
• 若请求的不是实际存在的文件/目录，将请求转发至index.html，由React Router处理路由逻辑

2. 确认Vite构建配置正确 #

检查项目的vite.config.ts，确保base配置匹配部署路径：

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

export default defineConfig({
  plugins: [react()],
  base: '/' // 若部署在子目录（如https://yourdomain.com/app），需改为'/app/'
})

3. 替换原生跳转为React Router的<Link>组件 #

当前Home.tsx使用原生href触发硬跳转，易引发服务器请求问题，建议改用<Link>组件实现前端路由跳转：
修改Home.tsx：

import { Link } from 'react-router-dom';
import { Button } from 'react-bootstrap';

const Home = () => {
    return (
        <div>
            <Button variant="primary" as={Link} to="/about"> More about me</Button>
        </div>
    );
};
export default Home;

<Link>会在前端完成路由切换，不会向服务器发送新请求，避免不必要的404场景。

验证流程 #

1. 重新构建项目：npm run build
2. 将dist目录内容重新上传至服务器根目录
3. 确认.htaccess文件已上传至服务器根目录
4. 测试页面跳转和刷新，验证/about页面正常加载

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