React app with react-router-dom not working in WordPress and ReactPress plugin

Question

I am trying to get a simple react app (create react app) with react-router-dom to work inside a WordPress site using the ReactPress plugin.

Taking code straight from the ReactPress documentation, I have the React app working on localhost, but cannot get the routing to work within Wordpress.

I have tried everything I've been able to find on the web -- fiddling with .htaccess, adding actions to stop WordPress routing, adding "homepage" to package.json, clearing the permalink cache, etc, but nothing has worked.

The pages render fine if I place it straight in the App function. But when they are in Routes/Route, it stops working.

I don't get any errors in production; I just get an empty div where the pages should render and a noscript message like below:

Inspecting WordPress site:

    <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>

Any ideas what is wrong?

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"
    ]
  }
}

Answer 1

You are using a forward slash in the path, use the it like below without slashes. Also for the first/default route use index prop instead of path="/".

 <Routes>
    <Route index element={<Home />} />
    <Route path="home" element={<Home />} />
    <Route path="about" element={<About />} />
    <Route path="*" element={<p>There's nothing here: 404!</p>} />
 </Routes>

Also instead of Link, I would recommend to use Navlink component as it automatically inherit an active class when clicked.

Answer 2

You probably need to set the basePath in the BrowserRouter component.

<BrowserRouter basename='/...'>
   ...
</BrowserRouter>