Javascript 将我的html登录页与react应用程序分开？

我想从我的react应用程序中获得一组单独的

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}`));

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'));

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

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}`));

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'));

如果我将当前html重命名为类似
react.html
的内容，并将
landingHomePage.html
重命名为
index.html
，则会出现错误

注意：转到
url/landingHomePage.html
会将我引导到正确的页面，没有任何问题，但我希望这是
index.html
，因此默认情况下它会转到那里。
它会给你带来什么错误？你找到方法了吗？如果是，请发布一个答案：）