I was trying to build a SPA website using React and WordPress (local environment).

I have successfully installed and configured the ReactPress plugin and created the React App via create-react-app.

(I checked “Use clear URLs” because I see that is mentioning client-side routing, but idk)

Everything works, except client-side routing (I use react-router-dom 6.0> for this).

This is my actual React code:

// App.jsx
import React from "react";
import { createBrowserRouter, RouterProvider } from "react-router-dom";

import About from "./pages/About";
import Contacts from "./pages/Contacts";
import Home from "./pages/Home";
import Root from "./pages/Root";
import Services from "./pages/Services";
import Error from "./pages/Error";

function App() {
  const router = createBrowserRouter([
    {
        path: "/",
        element: <Root />,
        errorElement: <Error />,
        children: [
          {
            index: true,
            element: <Home />,
          }
        ],
      },
      {
        path: "/about",
        element: <Root />,
        errorElement: <Error />,
        children: [
          {
            index: true,
            element: <About />,
          }
        ],
      },
      {
        path: "/contacts",
        element: <Root />,
        errorElement: <Error />,
        children: [
          {
            index: true,
            element: <Contacts />,
          }
        ],
      },
      {
        path: "/services",
        element: <Root />,
        errorElement: <Error />,
        children: [
          {
            index: true,
            element: <Services />,
          }
        ],
      }
  ]);

  return <RouterProvider router={router} />;
}

export default App;

// Where <Root /> contains the base layout (Nav and Outlet)
// Where <Error /> contains the 404 page to show when a page is not found
// Where the other components are simple pages containing an <h1>

// index.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';

import './index.css';
import App from './App';

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

This code seems not working.

——————————————————————————————————————————

If i try to uncheck “Use clear URLs”, then I create a page (ex. home) and then i add basename: "/home" to createBrowserRouter , like this:

// App.jsx
import React from "react";
import { createBrowserRouter, RouterProvider } from "react-router-dom";

import About from "./pages/About";
import Contacts from "./pages/Contacts";
import Home from "./pages/Home";
import Root from "./pages/Root";
import Services from "./pages/Services";
import Error from "./pages/Error";

function App() {
  const router = createBrowserRouter(
    [
      {
        path: "/",
        element: <Root />,
        errorElement: <Error />,
        children: [
          {
            index: true,
            element: <Home />,
          }
        ],
      },
      {
        path: "/about",
        element: <Root />,
        errorElement: <Error />,
        children: [
          {
            index: true,
            element: <About />,
          }
        ],
      },
      {
        path: "/contacts",
        element: <Root />,
        errorElement: <Error />,
        children: [
          {
            index: true,
            element: <Contacts />,
          }
        ],
      },
      {
        path: "/services",
        element: <Root />,
        errorElement: <Error />,
        children: [
          {
            index: true,
            element: <Services />,
          }
        ],
      }
    ],
    {
      basename: "/home",
    }
  );

  return <RouterProvider router={router} />;
}

export default App;

My home page (/home) is looking like that:

And as you can see the URL is not correct (because it says /home/about, instead of /about).

Can someone give me a help understanding this behaviors?
I have to uncheck or check “Use clean URLs”?
Is there a way I could implement routing without the need of creating a page (es. /home), so i could show the Home (React component) in “/” route?