首页　>　文章列表　>　Symfony- React Spa应用程序重新加载问题

Symfony- React Spa应用程序重新加载问题

205 2025-03-25

问题描述及背景

本文分享一个在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模板：

<!DOCTYPE html>


    
    
    
    
    
    {% 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 (
        <>
            
            
                
                    
                        } path="/login" />
                        } 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路由，保持了前后端职责分离的原则。

来源：https://dev.to/icolomina/a-symfony-react-spa-application-the-reload-problem-541b

上一篇　与Python掌握对话AI的艺术：逐步指南下一篇　Win11 24H2又有新问题:微软暂停向部分设备推送更新