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

Question

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

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

Answer 1

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

设置

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

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

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

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

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

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

应用路线

1. 转到您的app.jsx 文件和render 部分，而不仅仅是 那里有组件，让我们做一条路线。 （一条路线仅仅意味着一个 url 路径。）
2. 无论 url 路径是什么，您都可以拥有始终存在的 components。为了做到这一点，只是不要将这些项目作为路线。有关更多说明，请参阅下面的示例。
3. 要创建路线，只需添加以下代码：<Route path="/myPath" component={myComponent} />
4. 当用户转到www.myWebsite.com/myPath 时，将显示myComponent。

这个问题，假设你有一个到/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>
);

希望这会有所帮助。如果您还有其他问题，请告诉我。