如何在CakePHP中使用React Router，解决访问路由报MissingControllerException问题

你遇到的报错是因为React Router的BrowserHistory模式依赖前端路由接管路径跳转，直接访问/editPage这类非根路径时，请求会先发送到CakePHP服务端，服务端没有匹配的控制器规则就会抛出Cake\Http\Exception\MissingControllerException异常。你可以通过以下两种方案实现指定URL跳过CakePHP控制器校验，统一交给React Router处理：

方案1：配置CakePHP路由规则（推荐） #

打开项目目录下的config/routes.php文件，在所有后端API、功能路由的末尾添加兜底路由配置：

// 仅匹配单个指定路径交给前端入口
$routes->connect('/editPage', ['controller' => 'Pages', 'action' => 'display', 'home']);

// 如果有多个前端路由，可以用通配符批量匹配所有对应前缀的路径，统一返回React应用入口页
// $routes->connect('/*', ['controller' => 'Pages', 'action' => 'display', 'home']);

上述配置中Pages是你存放React应用入口的控制器，display('home')对应渲染React入口页面的方法，可根据你项目的实际入口调整。
配置完成后执行命令清空CakePHP缓存即可生效：
bin/cake cache clear_all

方案2：修改Web服务器重写规则 #

你也可以直接修改Web服务配置，把指定路径的请求直接重写为React前端入口：

Apache配置 #

修改项目根目录下的.htaccess文件，添加规则：

RewriteEngine On
# 匹配editPage路径，重写到入口页
RewriteRule ^editPage$ /index.html [L]

Nginx配置 #

修改对应站点的server配置块：

location /editPage {
    try_files $uri $uri/ /index.html;
}

补充说明 #

如果不想做服务端配置，也可以把React Router的路由模式切换为HashRouter，路径中#后的部分不会发送到服务端，不会触发CakePHP控制器匹配校验，缺点是URL会携带#符号，美观度较低。

内容的提问来源于stack exchange，提问作者Paul Trimor