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

来源：互联网收集：自由互联发布时间：2021-06-15

我正在使用React,React-Router和Webpack(使用webpack-dev-server),我在嵌套路由上加载自定义字体时遇到问题. 在我的浅路线上,例如/ user,/ group等,一切正常,但是当我有一个像/ group / user这样的嵌套路

我正在使用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');
}

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

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

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

相关文章