reactjs - 页面刷新时出现问题

Question

我在 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]'
   }
}

有人可以帮我解决这个问题吗。非常感谢。

Answer 1

尝试

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

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

Answer 2

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

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