问题描述及背景
本文分享一个在Symfony项目中集成React SPA时遇到的页面重新加载问题及解决方案。项目使用Symfony UX将React前端集成到Symfony应用中，通过Symfony控制器渲染包含主React组件的Twig模板。
Symfony控制器代码：
<code class="php">#[route('/app', name: 'get_app', methods: ['get'])]
public function getapp(): Response
{
return $this->render('app.html.twig');
}</code>
Twig模板：
<code class="html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="ie=edge" http-equiv="x-ua-compatible">
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<meta content="" name="description">
<meta content="" name="author">
<title>{% block title %}welcome!{% endblock %}</title>
{% block stylesheets %}
{{ encore_entry_link_tags('app') }}
{% endblock %}
{% block javascripts %}
{{ encore_entry_script_tags('app') }}
{% endblock %}
</head>
<body>
<div react_component=""></div>
</body>
</html></code>
React主组件：
<code class="javascript">export default function App() {
const wallet = useStellarWallet(walletNetwork.testnet);
return (
<>
<CssBaseline />
<WalletContext.Provider value={{wallet}}>
<Router>
<Routes>
<Route element={<SignIn />} path="/login" />
<Route children={<Layout />} element={<ProtectedRoute />} path="/app" />
{/* ... other routes ... */}
</Routes>
</Router>
</WalletContext.Provider>
</>
);
}</code>
使用useNavigate钩子进行React SPA导航时，重新加载页面会导致Symfony报错，提示路由不存在。这是因为React路由在前端定义，Symfony路由器无法识别。
初步尝试及局限性
最初尝试在Symfony控制器中添加一个包含slug参数的路由：
<code class="php">#[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');
}</code>
这种方法仅能处理/app/后单个路径段的情况，多段路径（例如/app/project/2/invest）仍然会匹配失败。
最终解决方案
最终解决方案包含前端和后端两部分：
后端（Symfony）修改：
- 创建一个内核订阅者，捕获所有以
/app/开头的请求：
<code class="php">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));
}
}</code>
- 修改
getapp控制器，接收并传递qslug参数到Twig模板：
<code class="php">#[route('/app', name: 'get_app', methods: ['get'])]
public function getapp(#[MapQueryParameter] ?string $qslug): Response
{
return $this->render('app.html.twig', ['pathSlug' => $qslug]);
}</code>
- 修改Twig模板，将
pathSlug传递给React组件：
<code class="html"><div pathSlug="{{ pathSlug }}" react_component=""></div></code>
前端（React）修改：
- 创建一个自定义钩子
useReloadedRoute，用于处理从localStorage中读取和删除重定向路径：
<code class="javascript">export const useReloadedRoute = (path?: string) => {
// ... (localStorage操作逻辑) ...
};</code>
- 在React主组件中使用
useReloadedRoute，并创建上下文ReloadRouteContext来共享重定向路径：
<code class="javascript">// ... (React Context 和 App 组件代码，使用 ReloadRouteContext 和 pathSlug prop) ...</code>
- 在
Layout组件中使用useEffect钩子，检查并处理重定向路径：
<code class="javascript">const reloadedRoute = useContext(ReloadRouteContext);
useEffect(() => {
const rlRoute = reloadedRoute.getRouteToNavigate();
if (rlRoute) {
const path = '/app/' + rlRoute;
reloadedRoute.removeRouteToNavigate();
navigate(path);
}
}, []);</code>
通过以上步骤，实现了在页面重新加载时，将React路由信息传递给后端，再由后端重定向到正确的React路由，从而解决了页面重新加载问题。
总结
此解决方案通过结合Symfony的内核事件监听和React的上下文机制，有效地处理了React SPA在Symfony应用中的页面重新加载问题。 这种方法避免了直接在Symfony中定义React路由，保持了前后端职责分离的原则。
