问题描述及背景
本文分享一个在Symfony项目中集成React SPA时遇到的页面重新加载问题及解决方案。项目使用Symfony UX将React前端集成到Symfony应用中，通过Symfony控制器渲染包含主React组件的Twig模板。
Symfony控制器代码：
#[route('/app', name: 'get_app', methods: ['get'])]public function getapp(): Response{ return $this->render('app.html.twig');}
Twig模板：
{% block title %}welcome!{% endblock %} {% block stylesheets %} {{ encore_entry_link_tags('app') }} {% endblock %} {% block javascripts %} {{ encore_entry_script_tags('app') }} {% endblock %}
React主组件：
export default function App() { const wallet = useStellarWallet(walletNetwork.testnet); return ( <Route element={} path="/login" /> <Route children={} element={} path="/app" /> {/* ... other routes ... */} 使用useNavigate钩子进行React SPA导航时，重新加载页面会导致Symfony报错，提示路由不存在。这是因为React路由在前端定义，Symfony路由器无法识别。
初步尝试及局限性
最初尝试在Symfony控制器中添加一个包含slug参数的路由：
#[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）仍然会匹配失败。
最终解决方案
最终解决方案包含前端和后端两部分：
后端（Symfony）修改：
创建一个内核订阅者，捕获所有以/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)); }}
修改getapp控制器，接收并传递qslug参数到Twig模板：
#[route('/app', name: 'get_app', methods: ['get'])]public function getapp(#[MapQueryParameter] ?string $qslug): Response{ return $this->render('app.html.twig', ['pathSlug' => $qslug]);}
修改Twig模板，将pathSlug传递给React组件：
前端（React）修改：
创建一个自定义钩子useReloadedRoute，用于处理从localStorage中读取和删除重定向路径：
export const useReloadedRoute = (path?: string) => { // ... (localStorage操作逻辑) ...};
在React主组件中使用useReloadedRoute，并创建上下文ReloadRouteContext来共享重定向路径：
// ... (React Context 和 App 组件代码，使用 ReloadRouteContext 和 pathSlug prop) ...
在Layout组件中使用useEffect钩子，检查并处理重定向路径：
const reloadedRoute = useContext(ReloadRouteContext);useEffect(() => { const rlRoute = reloadedRoute.getRouteToNavigate(); if (rlRoute) { const path = '/app/' + rlRoute; reloadedRoute.removeRouteToNavigate(); navigate(path); }}, []);
通过以上步骤，实现了在页面重新加载时，将React路由信息传递给后端，再由后端重定向到正确的React路由，从而解决了页面重新加载问题。
总结
此解决方案通过结合Symfony的内核事件监听和React的上下文机制，有效地处理了React SPA在Symfony应用中的页面重新加载问题。 这种方法避免了直接在Symfony中定义React路由，保持了前后端职责分离的原则。
以上就是Symfony- React Spa应用程序重新加载问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1284295.html
微信扫一扫 
支付宝扫一扫 
