页面刷新反应时出现问题

Question

我在反应中加载 simplelineicons 字体时遇到问题 app.The 从子组件刷新页面时发生问题 component.When 从父组件刷新页面我看到字体文件已正确加载。

代码如下： 在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

但上面应该没有课程url.It应该是：

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

我不确定 url

中是如何附加课程的

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

谁能帮我提前解决这个问题issue.Thanks。

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'
}