页面刷新时出现问题答案

【问题标题】：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]'
   }
}

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

【问题讨论】：

标签： reactjs react-router react-redux webpack-dev-server reactstrap

【解决方案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'
}

【讨论】：