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

Posted 2023-02-21

【中文标题】在 react-router 中找不到嵌套路由的字体

【英文标题】：Fonts not found with nested routes in react-router

【发布时间】：2016-04-02 20:29:03

【问题描述】：

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

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

Webpack 构建按预期将所有字体放在根级别（文件名如7f690e503a254e0b8349aec0177e07aa.ttf），当显示类似/user 的路由时，字体会正确加载。

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

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

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

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

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

【参考方案1】：

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

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

那么您知道所有相对路径都应该相对于您的域的根目录。

【讨论】：

谢谢！我将<base href="/"> 添加到我的index.html 中，现在字体已按预期加载！这绝对不是我知道和忘记的事情。我什至不知道<base> 存在。

我仍然想知道相对 URL 的来源。

【参考方案2】：

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

【参考方案3】：

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

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

【讨论】：

谢谢，但我很确定这里的问题并不少见。 Webpack 转换字体并以新名称将它们全部存储在根目录下。它决定在浏览器端查找相对于当前嵌套路由 URL 的字体。

您应该检查实际生成的 CSS 文件 - 因为浏览器不会加载“*.less”javascript，它会加载打包程序为其生成的内容。当然，您的输出 CSS 中有相对路径。