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

Question

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

我已经四处搜寻，但对于使用create-react-app如何做到这一点似乎没有明确的答案。任何建议表示赞赏。

Answer 1

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

设置

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

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

   ReactDOM.render（                   ，     document.getElementById（'root'） ）;

这是什么，基本上是说出App将具有路由支持的反应。

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

现在已经设置了幕后，我们可以开始向应用程序添加路线或路径。

应用路线

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

与此有关的问题是，假设您有一条到/myPath的路线和一条到/（主页，即www.myWebsite.com/）的路线，然后当用户导航到{ {1}}，主页也会显示。为了防止这种情况发生，只需将所有路由包装在www.myWebsite.com/myPath组件中即可。

因此<Switch></Switch>的渲染部分中的最终代码将如下所示：

app.jsx

希望这会有所帮助。让我知道您是否还有其他问题。