Fonts not found with nested routes in reactor

Question

I use React, React-Router, and Webpack (c webpack-dev-server), and I'm having trouble loading custom fonts on nested routes.

Everything works fine on my small routes, such as /user, /groupetc., but when I have a nested route, for example /group/user, custom fonts do not load (error 404).

In the Webpack assembly, all fonts are placed at the root level (with file names, for example 7f690e503a254e0b8349aec0177e07aa.ttf), and when showing a route, for example /user, fonts are loaded properly.

However, when in a nested route, for example /group/user, the browser tries to download fonts from a URL, for example /group/7f690e503a254e0b8349aec0177e07aa.ttf, which does not exist.

I think that somewhere the font is considered a relative path, but I do not know where.

How can I make font paths absolute paths, not relative? Or is there another way to fix this?

Not sure if this matters, but I defined my fonts as shown below in my file styles.less:

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

Answer 1

In this case, a possible solution is to add a basic element to your pages. The base element allows you to specify the base URL that will be used throughout the document for relative URLs. For example, installation:

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

then you know that all relative paths must belong to the root of your domain.

Answer 2

, webpack react router 4. , file-loader url-loader webpack.config.json.

- :

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

Answer 3

Since you are using less, the most practical way for you to fix this is to configure the base paths so that the code generation creates an absolute path according to your configuration.

Please check less documentation here: http://lesscss.org/usage/ .