问题描述及背景
本文分享一个在Symfony项目中集成React SPA时遇到的页面重新加载问题及解决方案。项目使用Symfony UX将React前端集成到Symfony应用中，通过Symfony控制器渲染包含主React组件的Twig模板。
Symfony控制器代码：
Twig模板：
React主组件：
使用
钩子进行React SPA导航时，重新加载页面会导致Symfony报错，提示路由不存在。这是因为React路由在前端定义，Symfony路由器无法识别。
初步尝试及局限性
最初尝试在Symfony控制器中添加一个包含slug参数的路由：
这种方法仅能处理
后单个路径段的情况，多段路径（例如
）仍然会匹配失败。
最终解决方案
最终解决方案包含前端和后端两部分：
后端（Symfony）修改：
创建一个内核订阅者，捕获所有以
开头的请求：
修改
控制器，接收并传递
参数到Twig模板：
修改Twig模板，将
传递给React组件：
前端（React）修改：
创建一个自定义钩子
，用于处理从localStorage中读取和删除重定向路径：
在React主组件中使用
，并创建上下文
来共享重定向路径：
在
组件中使用
钩子，检查并处理重定向路径：
通过以上步骤，实现了在页面重新加载时，将React路由信息传递给后端，再由后端重定向到正确的React路由，从而解决了页面重新加载问题。
总结
此解决方案通过结合Symfony的内核事件监听和React的上下文机制，有效地处理了React SPA在Symfony应用中的页面重新加载问题。 这种方法避免了直接在Symfony中定义React路由，保持了前后端职责分离的原则。
#[route('/app', name: 'get_app', methods: ['get'])]
public function getapp(): Response
{
return $this->render('app.html.twig');
}
{% block title %}welcome!{% endblock %}
{% block stylesheets %}
{{ encore_entry_link_tags('app') }}
{% endblock %}
{% block javascripts %}
{{ encore_entry_script_tags('app') }}
{% endblock %}
export default function App() {
const wallet = useStellarWallet(walletNetwork.testnet);
return (
<>
);
}useNavigate#[route('/app', name: 'get_app', methods: ['get'])]
#[route('/app/{slug}', name: 'get_app_with_slug', methods: ['get'])]
public function getapp(): Response
{
return $this->render('app.html.twig');
}/app//app/project/2/invest/app/public static function getSubscribedEvents(): array
{
return [
KernelEvents::REQUEST => 'onRequest'
];
}
public function onRequest(RequestEvent $event): void
{
$request = $event->getRequest();
if (preg_match('#^\/app\/#', $request->getRequestUri())) {
$pathSlug = preg_replace('#^\/app\/#', '', $request->getRequestUri());
$url = $this->router->generate('get_app', ['qslug' => $pathSlug]);
$event->setResponse(new RedirectResponse($url));
}
}getappqslug#[route('/app', name: 'get_app', methods: ['get'])]
public function getapp(#[MapQueryParameter] ?string $qslug): Response
{
return $this->render('app.html.twig', ['pathSlug' => $qslug]);
}pathSluguseReloadedRouteexport const useReloadedRoute = (path?: string) => {
// ... (localStorage操作逻辑) ...
};useReloadedRouteReloadRouteContext// ... (React Context 和 App 组件代码，使用 ReloadRouteContext 和 pathSlug prop) ...LayoutuseEffectconst reloadedRoute = useContext(ReloadRouteContext);
useEffect(() => {
const rlRoute = reloadedRoute.getRouteToNavigate();
if (rlRoute) {
const path = '/app/' + rlRoute;
reloadedRoute.removeRouteToNavigate();
navigate(path);
}
}, []);