如何解决React+Symfony(Vite)项目中路由刷新404问题？

问题原因 #

React Router属于客户端路由，页面跳转仅在浏览器端完成，不会向服务器发送新请求。但刷新页面时，浏览器会直接请求当前URL，Symfony服务器找不到对应的路由配置，因此返回"未找到路由"错误。

解决方案 #

方案1：修改Symfony路由，匹配所有React子路径 #

调整控制器的路由注解，让所有/reseau-sociaux开头的路径都指向渲染React页面的方法：

/**
 * @Route("/reseau-sociaux/{path}", name="reseau-sociaux_home", requirements={"path"=".+"}, defaults={"path"=null})
 * @IsGranted("ROLE_USER")
 */
public function reseauSociaux(Request $request)
{
    return $this->render('reseauSociaux/reseauSociaux.html.twig');
}

• requirements={"path"=".+"}：允许path匹配任意字符（包括斜杠）
• defaults={"path"=null}：确保根路径/reseau-sociaux也能匹配到该方法

同时优化React Router配置，通过basename指定基础路径，简化路由规则：

import React from "react";
import { createRoot } from 'react-dom/client';
import Actualite from './pageActualite/Actualite'
import './styles/app.css';
import { BrowserRouter, Routes, Route } from "react-router-dom";
import ProfilUser from "./otherPages/ProfilUser/ProfilUser";

const App = () => {
    return (
        <BrowserRouter basename="/reseau-sociaux">
            <Routes>
                <Route path="/" element={<Actualite />}/>
                <Route path="/profil" element={<ProfilUser />}/>
            </Routes>
        </BrowserRouter>
    );
}
const rootElement = document.querySelector('#app');
const root = createRoot(rootElement);
root.render(<App />);

方案2：配置服务器重写规则（生产环境推荐） #

通过Web服务器的重写规则，将所有/reseau-sociaux开头的请求转发到Symfony入口文件index.php，让Symfony处理路由后渲染React页面。

Nginx配置示例

在站点配置中添加：

location /reseau-sociaux {
    try_files $uri $uri/ /index.php?$query_string;
}

Apache配置示例

确保启用mod_rewrite模块，在项目根目录的.htaccess中添加：

RewriteRule ^reseau-sociaux/(.*)$ index.php [QSA,L]

注意事项 #

• 避免React Router的路由路径与Symfony其他服务端路由冲突
• 开发环境用方案1更便捷，无需修改服务器配置；生产环境推荐方案2，路由规则更集中可控

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