Отделить мою целевую страницу HTML от приложения реакции?

Question

Я хочу иметь отдельный набор HTML страниц из моего приложения реакции.

Я создал эту ванильную HTML/ CSS/ JS целевую страницу, которая выглядит великолепно.Я пытаюсь понять, как сделать эту страницу индексом, не добавляя ее в мое приложение React.

Это из-за различных плагинов, которые я использую, которые не переводят в React, и уникального CSS кода, который я бы не хотел иметь глобальным.

Представьте себе загрузкуна главную страницу, которая ваниль HTML.Затем, когда пользователь нажимает кнопку входа, он направляет их в компонент React /login.У меня настроена маршрутизация, так что ссылка на /login в привязке вызовет React, мне просто нужно, чтобы HTML был автономным.

Вот способ, которым в настоящее время настраивается мое приложение.

reactapp
|
------server.js
|
------package.json
|
------boilerplate etc
|
------client
      |
       -------public
                |
                 -----index.html
                |
                -------landingHomePage.html
      |
      --------src
               |
               -----index.js
               |
               -----page1.js, page2.js, page3.js etc

в reactapp/server.js

app.use(express.static(path.join(__dirname, "client/build")));

const port = process.env.PORT || 5000
console.log("PORT NUMBER IS " + port);

app.listen(port, () => console.log(`Server Running on port ${port}`));

в reactapp/package.json

{
  "name": "reactexpress",
  "version": "1.0.0",
  "description": "react-express boilerplate",
  "main": "server.js",
  "scripts": {
    "client-install": "npm install --prefix client",
    "start": "node server.js",
    "server": "nodemon server.js",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "test": "echo \"Error: no test specified\" && exit 1",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
  }, ...

в reactapp/client/src/index.js

ReactDOM.render(
<BrowserRouter>
    <Layout>
       <Switch>
         <Route exact strict path={"/page1"} component={page1} />
         <Route exact path={"/page2"} component={page2} />
         <Route exact path={"/page3"} component={page3} />
         <Route exact path={"/login"} component={Login}/>
       </Switch>
    </Layout>
    </BrowserRouter>
, document.getElementById('root'));

ТОКindex.html - это стандартный HTML пустой шаблон с

<div id="root"></div>

Если я переименую текущий html в что-то вроде react.html и переименую landingHomePage.html в index.html, он выдаст ошибки.

Примечание: переход на url/landingHomePage.html НАПРАВЛЯЕТ меня на нужную страницу без каких-либо проблем, но я хочу, чтобы это было index.html, поэтому он будет идти по умолчанию.