ReactPress部署React+react-router-dom至WordPress路由失效问题排查

我用ReactPress插件把基于Create React App开发、集成了react-router-dom的简易React应用部署到WordPress站点。本地环境代码能正常运行，但到了WordPress里路由功能完全失效。试过修改.htaccess、添加阻止WordPress路由的动作、在package.json配置homepage、清除永久链接缓存这些方法，都没解决。直接在App函数里渲染页面能正常显示，但一用Routes/Route组件就不行。生产环境没报错，只显示空div和noscript提示：

<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
  <div class="App">
    <h1 id="root">Welcome to ReactPress with React Router!!!</h1>
  </div>
</div>

相关代码文件 #

index.js #

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

App.js #

import React, { Component } from 'react';
import { Routes, Route, Link } from 'react-router-dom';

function Home() {
  return (
    <>
      <main>
        <h2>Welcome to the homepage!</h2>
        <p>You can do this, I believe in you.</p>
      </main>
      <nav>
        <Link to="/about">About</Link>
      </nav>
    </>
  );
}

function About() {
  return (
    <>
      <main>
        <h2>Who are we?</h2>
        <p>That feels like an existential question, don't you think?</p>
      </main>
      <nav>
        <Link to="/">Home</Link>
      </nav>
    </>
  );
}

export default function App() {
  return (
    <div className="App">
      <h1>Welcome to ReactPress with React Router!!!</h1>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
}

package.json #

{
  "name": "wp-react-test-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.9.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.1.3",
    "lodash": "^4.17.21",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.4.3",
    "react-scripts": "^5.0.1",
    "redux": "^4.2.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "PUBLIC_URL=/wp-content/reactpress/apps/wp-react-test-react/build react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

请问问题出在哪里？

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