在 react-router 中找不到嵌套路由的字体

Question

我正在使用 React、React-Router 和 Webpack（使用 webpack-dev-server），但在嵌套路由上加载自定义字体时遇到问题。

在 /user、/group 等浅层路线上一切正常，但当我有 /group/user 等嵌套路线时，自定义字体不会加载（404 错误）。

Webpack 构建将所有字体按预期放置在根级别（文件名如 7f690e503a254e0b8349aec0177e07aa.ttf），并且在显示如 /user 的路径时，字体已正确加载。

但是，当在 /group/user 这样的嵌套路由中时，浏览器会尝试从 URL（例如 /group/7f690e503a254e0b8349aec0177e07aa.ttf）加载字体，但它不存在。

我认为某处字体被假定为相对路径，但我不知道在哪里。

如何让字体路径成为绝对路径而不是相对路径？或者有其他方法可以解决这个问题吗？

不确定这是否重要，但我在 styles.less 文件中定义了如下所示的字体：

// Main font(s)
@font-face {
  font-family: 'Lato-Regular';
  src: url('../fonts/Lato-Regular.ttf') format('truetype');
}

Answer 1

由于您使用的较少，因此最实用的修复方法是配置基本路径，以便代码生成会根据您的配置生成绝对路径。

请在此处查看 less 文档：http://lesscss.org/usage/。

Answer 2

在这种情况下，可能的解决方案是将 base element 添加到您的网页。 base 元素允许您指定要在整个文档中用于相对 URL 地址的基 URL。例如设置：

<base href="http://www.youdomain.com/">

那么你就知道所有的相对路径都应该是相对于你的域的根。

Answer 3

我在使用 webpack 和 react router 4 时遇到了同样的问题。我通过在 webpack.config.json.

中从 file-loader 切换到 url-loader 解决了这个问题

工作模块 - 加载程序：

{ test: /\.(otf|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader: 'url-loader?name=./Scripts/dist/[name].[ext]' }

Fonts not found with nested routes in react-router