Question

我想从我的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}`));

在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，所以它将默认显示在页面上。

将我的HTML登陆页面与React应用分开吗？

0 个答案: