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

Question

我正在使用React,React-Router和Webpack(with webpack-dev-server),我在嵌套路由上加载自定义字体时遇到问题.

在我的浅路线上/user,一切都很好/group,等等,但是当我有一个嵌套的路线时/group/user,自定义字体不会被加载(404错误).

Webpack构建将所有字体放在根级别中(如文件名所示7f690e503a254e0b8349aec0177e07aa.ttf),并且在显示类似路径时/user,字体会正确加载.

但是,当在嵌套路径中时/group/user,浏览器会尝试/group/7f690e503a254e0b8349aec0177e07aa.ttf从不存在的URL加载字体.

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

如何使字体路径成为绝对路径而不是相对路径？或者还有另一种解决方法吗？

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

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

Answer 1

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

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

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