我无法让 Symfony 4 在 SPA 设置中正常工作。
具体来说，当我使用 React-router 链接导航时，一切正常。
但是如果我尝试直接访问任何路由（除了 home ），Symfony 会拦截它，当然，会抛出一个找不到路由的错误。
将 Symfony 放在子域中并将其仅用作 API 的替代方案是不可行的，因为我需要框架提供的所有用户和会话管理工具。
当然，我将需要 Symfony 的所有 API 调用路由到后端。
我正在使用 Symfony 4 的默认目录结构，只在顶层为所有 react/redux 代码添加一个目录 /client。
构建代码放在 /public/build 下。
我还尝试使用以下代码在 /public 上放置一个 .htaccess 文件，但这没有帮助。
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [QSA,L]
谢谢
解决方案可能如下。
带有路由注释的控制器，所有路由都将通过使用此注释来处理，无论路由可能有多少个参数：
namespace App\Controller;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\Routing\Annotation\Route;
class DefaultController extends Controller
{
/**
* @Template("default/index.html.twig")
* @Route("/{reactRouting}", name="index", requirements={"reactRouting"=".+"}, defaults={"reactRouting": null})
*/
public function index()
{
return [];
}
}
如果您有不应由 react 处理的路由，则您的注释可以将它们排除在外，如下所示 - 所有以 api 开头的路由都不会由 react 处理：
@Route("/{reactRouting}", name="index", requirements={"reactRouting"="^(?!api).+"}, defaults={"reactRouting": null})
带有根元素的 Twig 模板：
{% extends 'base.html.twig' %}
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('build/js/app.css') }}">
{% endblock %}
{% block body %}
<div id="root"><div>
{% endblock %}
{% block javascripts %}
<script type="text/javascript" src="{{ asset('build/js/app.js') }}"></script>
{% endblock %}
react索引文件：
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import Home from "./containers/Home";
import AboutUs from "./containers/AboutUs";
ReactDOM.render(
<BrowserRouter>
<Switch>
<Route path="/" component={Home}/>
<Route path="/about-us" component={AboutUs}/>
</Switch>
</BrowserRouter>,
document.getElementById('root'));
我的安可配置：
var Encore = require('@symfony/webpack-encore');
Encore
// the project directory where compiled assets will be stored
.setOutputPath('public/build/')
// the public path used by the web server to access the previous directory
.setPublicPath('/build')
.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())
// uncomment to create hashed filenames (e.g. app.abc123.css)
// .enableVersioning(Encore.isProduction())
// uncomment to define the assets of the project
// .addEntry('js/app', './assets/js/app.js')
// .addStyleEntry('css/app', './assets/css/app.scss')
// uncomment if you use Sass/SCSS files
// .enableSassLoader()
// uncomment for legacy applications that require $/jQuery as a global variable
// .autoProvidejQuery()
.enableReactPreset()
.addEntry('js/app', './react/index.js')
.configureBabel((config) => {
config.presets.push('stage-1');
})
;
module.exports = Encore.getWebpackConfig();
解决这个问题的正确方法是像这样设置路由注释：
/**
* @Route("/{reactRouting}", name="index", priority="-1", defaults={"reactRouting": null}, requirements={"reactRouting"=".+"})
*/
public function index(): Response
{
return $this->render('index.html.twig');
}
这里的魔法是使用“priority=-1”参数。这允许 symfony 使用路由来为 API 方法找到正确的路径，并且只有当没有找到路由时，React 路由器才会启动，寻找它的路由。如果也没有 React 路由，您应该使用 React 应用程序中的一些“NotFound”组件来处理它。
通过这种方法，您仍然可以使用 SPA，但也可以在同一个应用程序中定义所有逻辑并使用 API。
我相信我找到了一个可能的设置。
在 Symfony 的 routes.yaml 中包含 react-router 路由，所有路由都指向生成 React 根组件的同一个控制器。
所有其他路由，如 API 调用，将正常设置。
//config/routes.yaml
//all routes handled by PWA(react-router) pointing to same controller
home:
path: /
controller: App\Controller\IndexController::index
account:
path: /account
controller: App\Controller\IndexController::index
如果有人知道替代设置，请分享。