React+WordPress页面刷新出现404错误，求插件内解决方案

核心思路 #

通过WordPress的重写API添加路由规则，将React路由的所有请求指向插件的主模板文件，让React接管路由处理，全程无需修改全局.htaccess文件。

具体实现步骤 #

1. 添加重写规则 #

在插件主文件中插入以下代码，注册自定义重写规则，把React路由路径（需替换为你的插件前端访问基础路径）指向WordPress查询入口：

function register_react_rewrite_rules() {
    // 示例：若插件前端页面的基础路径是'react-app'，则匹配'react-app/xxx'格式的路由
    add_rewrite_rule(
        '^react-app/(.+)/?$',
        'index.php?react_route=$matches[1]',
        'top'
    );
}
add_action('init', 'register_react_rewrite_rules');

2. 注册查询变量 #

让WordPress识别自定义的查询参数，确保路由信息能被正确传递：

function register_react_query_var($vars) {
    $vars[] = 'react_route';
    return $vars;
}
add_filter('query_vars', 'register_react_query_var');

3. 加载React应用模板 #

当匹配到自定义路由规则时，引导WordPress加载插件内的模板文件：

function load_react_app_template($template) {
    $react_route = get_query_var('react_route');
    if ($react_route) {
        // 替换为你插件内模板文件的实际路径，比如插件根目录下的templates/react-app.php
        $plugin_template = plugin_dir_path(__FILE__) . 'templates/react-app.php';
        if (file_exists($plugin_template)) {
            return $plugin_template;
        }
    }
    return $template;
}
add_filter('template_include', 'load_react_app_template');

4. 模板文件示例（react-app.php） #

在插件的templates目录下创建该文件，引入编译后的React脚本，确保应用能正常挂载：

<?php get_header(); ?>
<div id="react-app-root"></div>
<script src="<?php echo plugin_dir_url(__FILE__) . '../build/index.js'; ?>"></script>
<?php get_footer(); ?>

5. 配置React路由的基础路径 #

修改React路由配置，设置basename为插件的基础访问路径，避免与WordPress自身路由冲突：

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

function App() {
    return (
        <Router basename="/react-app">
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<About />} />
                {/* 添加其他路由 */}
            </Routes>
        </Router>
    );
}

export default App;

6. 刷新重写规则 #

完成代码添加后，进入WordPress后台的「设置→固定链接」页面，直接点击「保存更改」，触发WordPress刷新重写规则，无需修改任何设置。

原理说明 #

• 重写规则将所有React路由请求转发到WordPress的index.php，并携带自定义查询变量
• 通过template_include过滤器，让WordPress加载插件专属模板，渲染React应用
• React路由的basename确保客户端路由与WordPress服务端规则匹配，避免路径冲突

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