How can a React project work with multiple HTML files?

[ppowell777]

Currently I have a React project that, by default, goes to /public/index.html, serves up /src/index.js, and the homepage is displayed just fine.

However, I will also need to do the same to /public/guide/index.html, to /public/login/index.html, /public/questions/index.html, etc. I have static HTML content in /public, /public/guide, /public/login, etc. with the "contents" DOM in the <BODY> tag emptied out, filled by a select React component. This works just fine with the homepage, however, the Guide page only shows the static HTML shell and no contents from the Guide React component.

I am trying to work my architecture around this article on Stack Overflow, but nothing is happening beyond the homepage.

index.js:

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

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

App.js:

import { Routes, Route } from "react-router-dom";
import HomePage from "./Apps/homepage.js";
import GuidePage from "./Apps/loginpage.js";

const App = () => {
    return (
        <Routes>
          <Route exact path="/" element={<HomePage />} />
          <Route exact path="/guide/" element={<GuidePage />} />
        </Routes>
    );
};

export default App;

I do not have nor know how to find or work with webpack.config.js to handle multiple HTML files, so I will need a lot of handholding.

Can someone show me exactly where I would need to go to learn how to do this effectively?

Thanks