时间戳

首页 > 解决方案 > 在 create-react-app 中包含静态 HTML 文件夹/文件

reactjs - 在 create-react-app 中包含静态 HTML 文件夹/文件

问题描述

我将 create-react-app 与 react-router-dom 模块一起用于我的 React 应用程序。我有一个包含我希望反应应用程序呈现的静态 HTML/CSS/JS 的子文件夹。它可以像让路由器显示 /static/index.html 一样简单。

我四处搜索，似乎没有关于如何使用 create-react-app 来实现这一点的明确答案。任何建议表示赞赏。

标签： reactjscreate-react-appreact-router-dom

解决方案

为了在您的 react 应用程序中使用路由，您必须执行以下操作：

设置

  1. 通过打开终端/cmd 来安装 react，转到当前的应用程序目录，然后输入以下命令：npm i react-router-dom. 点击回车并安装。
  2. 接下来，通过在代码开头添加以下行，转到index.js文件并导入：BrowserRouterimport { BrowserRouter } from 'react-router-dom'

  3. 然后将您的渲染内容更改为如下所示：

    ReactDOM.render( , document.getElementById('root') );

那是做什么的，它基本上告诉反应App将有路由支持。

  1. 现在转到您的app.jsx文件并导入以下内容：import { Route, Switch } from 'react-router-dom';. （稍后我会解释它们都是什么。）

现在已经设置了幕后，我们可以开始向 out app 添加路由或路径。

申请路线

  1. 转到您的app.jsx文件并在该render部分而不是仅在其中包含组件，让我们制作一条路线。（路由仅表示 url 路径。）
  2. components无论 url 路径是什么，你都可以让它一直存在。为了做到这一点，只是不要将这些项目作为路线。有关更多说明，请参见下面的示例。
  3. 要创建路由，只需添加以下代码：<Route path="/myPath" component={myComponent} />
  4. myComponent将在用户转到 时显示www.myWebsite.com/myPath。

这样做的问题是，假设您有一条到 的路线/myPath，还有一条到/（主页，即www.myWebsite.com/）的路线，那么当用户导航到 时www.myWebsite.com/myPath，主页也会显示。为了防止这种情况发生，只需将所有路由包装在一个<Switch></Switch>组件中。

所以渲染部分的最终代码app.jsx将如下所示：

return (
    <div className="App">
        <div className="bg" />
        // Will always show `Header` no matter what the rout is.
        <Header/>

        <Switch>
            <Route path="/about" component={about} />
            <Route path="/" exact component={WelcomContent} />
        </Switch>

        // Will always show `Footer` no matter what the rout is.
        <Footer />
    </div>
);

希望这可以帮助。如果您还有问题，请告诉我。

推荐阅读