页面刷新时出现问题

Posted 2023-03-23

【中文标题】页面刷新时出现问题

【英文标题】：Issue while page refresh in react

【发布时间】：2018-06-06 05:17:44

【问题描述】：

我在 react 应用程序中加载 simplelineicons 字体时遇到问题。从子组件刷新页面时会出现问题。从父组件刷新页面时，我看到字体文件已正确加载。

代码如下： 在 Full.js 中

<Switch>
    <Route path="/dashboard" component=Dashboard/>
    <Route path="/courses" component=Courses/>
</Switch>

在 Courses.js 中路由定义如下：

const Courses = () => (
  <Switch>
    <Route exact path="/courses" component=Course/>
    <Route path="/courses/info" component=Info/>
  </Switch>
)

当我用 url /courses/info 刷新页面时，我看到字体文件没有加载，因为 url 附加了以下课程：

http://localhost:8080/courses/js/fonts/Simple-Line-Icons.78f07e2c2a535c26ef21d95e41bd7175.woff

但上面的网址应该没有课程。应该是：

http://localhost:8080/js/fonts/Simple-Line-Icons.78f07e2c2a535c26ef21d95e41bd7175.woff

我不确定课程是如何附加到网址中的

我在 webpack 配置中使用以下内容：

   test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
   loader: 'file-loader?name=/js/fonts/[name].[ext]',
    options: 
       name: './fonts/[name].[hash].[ext]'
   

谁能帮我解决这个问题。非常感谢。

【参考方案1】：

试试

   test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
   loader: 'file-loader',
    options: 
       name: '/fonts/[name].[hash].[ext]'
   

您使用相对路径语法。它应该是绝对的。请告诉我它有帮助

【讨论】：

感谢您的回复。我已经尝试过了，但没有成功。此外，当我使用 url /courses 刷新时，一切正常，但使用 url /courses/info 失败。你能帮我吗这个。

如何包含字体文件。在 index.html 中还是通过 import 语句？

我通过 import(import 'simple-line-icons/css/simple-line-icons.css';) 包含字体 css 文件。

现在检查字体文件的路径。现在出现了什么？

我没有明确加载字体文件。我认为它应该由文件加载器来处理。你能告诉我怎么做吗？

【参考方案2】：

我可以通过在 webpack 配置中添加以下内容来解决这个问题：

 test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
 loader: 'url-loader?limit=100000'