如何在Contao CMS 3.5.31中集成React Router实现页面导航

1. 创建Contao的Catch-All页面 #

• 在Contao后台新建一个常规页面（比如命名为React App），作为React应用的入口页
• 给这个页面设置唯一别名（比如react-entry），后续服务器路由会指向该页面
• 在该页面的模板中，添加React根容器（如<div id="react-root"></div>），并引入React、React Router及打包后的React项目JS文件

2. 配置服务器路由重写 #

Apache（.htaccess） #

在Contao根目录的.htaccess文件中添加规则，让未被Contao匹配的请求转发到React入口页：

# 优先让Contao处理自身路由
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# 排除Contao后台、静态资源等核心路径
RewriteCond %{REQUEST_URI} !^/contao/
RewriteCond %{REQUEST_URI} !^/assets/
RewriteCond %{REQUEST_URI} !^/system/
# 转发到React入口页面
RewriteRule ^(.*)$ /react-entry [L]

Nginx #

在站点配置的location块中添加：

location / {
    try_files $uri $uri/ /react-entry;
    # 单独处理Contao核心路径，避免被重写
    location ~ ^/(contao|assets|system) {
        try_files $uri $uri/ =404;
    }
}

3. 配置React Router的前端路由 #

确保React应用使用BrowserRouter（不要用HashRouter），并配置好所有前端路由规则：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/product-list" element={<ProductList />} />
        <Route path="/product-detail/:id" element={<ProductDetail />} />
        {/* 其他自定义路由 */}
      </Routes>
    </Router>
  );
}

4. 处理页面导航逻辑 #

• React内部路由跳转，必须使用React Router的Link组件，避免触发整页刷新：

import { Link } from 'react-router-dom';

// 示例导航
<Link to="/product-list">查看产品列表</Link>

• 从Contao原生页面跳转到React路由时，直接用普通<a>标签指向目标路径即可，服务器会自动转发到React入口页，再由React Router处理渲染

5. 验证路由规则 #

• 直接访问React路由路径（如/product-list），确认服务器会转发到react-entry页面，且React Router能正确渲染对应组件
• 测试Contao原生页面的访问，确保重写规则不会影响原有页面

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