如何用.htaccess将域名请求转发至子目录PHP文件并保留URL？

要让所有请求都通过/php/index.php处理，同时保持地址栏URL与React路由一致，核心是通过服务器URL重写将非静态资源请求转发到PHP文件，再由PHP动态处理元标签后输出React的页面内容，配合React前端路由完成页面渲染。

1. 服务器URL重写配置 #

Apache（使用.htaccess） #

在网站根目录创建.htaccess文件，添加以下规则：

RewriteEngine On

# 允许直接访问已存在的静态文件/目录（如CSS、JS、图片等）
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]

# 所有其他请求转发到/php/index.php，保留原URL
RewriteRule ^ /php/index.php [L]

这条规则会优先放行静态资源，将动态路由请求全部转发到PHP处理，且地址栏URL不会改变。

Nginx #

修改你的Nginx站点配置文件，在server块内添加：

# 处理静态资源与路由转发
location / {
    try_files $uri $uri/ /php/index.php?$query_string;
}

# PHP解析配置（需确保已启用php-fpm）
location ~ \.php$ {
    fastcgi_pass unix:/run/php/php8.2-fpm.sock; # 根据你的PHP版本调整路径
    fastcgi_index index.php;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    include fastcgi_params;
}

try_files会先尝试访问请求的文件/目录，不存在则转发到PHP文件，同时保留查询参数。

2. PHP文件（/php/index.php）处理逻辑 #

PHP需要获取当前请求路径，动态设置元标签，再输出React的页面内容：

<?php
// 获取当前请求的完整路径（如/mypage）
$requestPath = $_SERVER['REQUEST_URI'];

// 根据请求路径动态配置元标签
$metaTitle = "默认站点标题";
$metaDescription = "默认站点描述";

switch($requestPath) {
    case '/mypage':
        $metaTitle = "我的自定义页面";
        $metaDescription = "这是我的专属页面描述";
        break;
    // 可添加更多路由的元标签配置
}

// 读取React构建后的index.html文件（路径需根据你的项目结构调整）
// 开发环境可改为/public/index.html，生产环境一般是/build/index.html
$reactHtml = file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/build/index.html');

// 替换React index.html中的占位元标签
// 需提前在React的public/index.html中预留这些占位符
$reactHtml = str_replace('<!-- META_TITLE -->', "<title>{$metaTitle}</title>", $reactHtml);
$reactHtml = str_replace('<!-- META_DESCRIPTION -->', "<meta name='description' content='{$metaDescription}'>", $reactHtml);

// 输出处理后的页面内容
echo $reactHtml;
?>

注意：需要在React项目的public/index.html中预留元标签占位符，比如：

<head>
    <!-- META_TITLE -->
    <!-- META_DESCRIPTION -->
    <!-- 其他静态元标签、CSS/JS引入 -->
</head>

3. React前端路由配合 #

确保React使用BrowserRouter（而非HashRouter），这样前端路由能与服务器重写规则兼容：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import MyPage from './pages/MyPage';

function App() {
    return (
        <Router>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/mypage" element={<MyPage />} />
                <!-- 添加其他路由规则 -->
            </Routes>
        </Router>
    );
}

export default App;

当用户访问https://example.com/mypage时，服务器会将请求转发到/php/index.php，PHP处理元标签后输出React页面，React路由会匹配/mypage并渲染对应组件，地址栏URL保持不变。

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