Проблема при обновлении страницы в реакции

Question

Я столкнулся с проблемой при загрузке шрифта simplelineicons в приложении реагирования. Проблема возникает, когда страница обновляется из дочернего компонента. Когда страница обновляется из родительского компонента, я вижу, что файл шрифта загружен правильно.

Вот код: В Full.js

<Switch>
    <Route path="/dashboard" component={Dashboard}/>
    <Route path="/courses" component={Courses}/>
</Switch>

В Courses.js маршрут определяется следующим образом:

const Courses = () => (
  <Switch>
    <Route exact path="/courses" component={Course}/>
    <Route path="/courses/info" component={Info}/>
  </Switch>
)

Когда я обновляю страницу с помощью URL / курсы / информация, я вижу, что файл шрифта не загружается, так как URL добавляется с курсами, как показано ниже:

http://localhost:8080/courses/js/fonts/Simple-Line-Icons.78f07e2c2a535c26ef21d95e41bd7175.woff

но он не должен иметь курсы по указанному выше адресу. Это должно быть:

http://localhost:8080/js/fonts/Simple-Line-Icons.78f07e2c2a535c26ef21d95e41bd7175.woff

Я не уверен, как курсы добавляются в URL

Я использую ниже в конфиге webpack:

{
   test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
   loader: 'file-loader?name=/js/fonts/[name].[ext]',
    options: {
       name: './fonts/[name].[hash].[ext]'
   }
}

Может кто-нибудь, пожалуйста, помогите мне, как решить эту проблему. Большое спасибо заранее.

Answer 1

Я смог решить эту проблему, добавив ниже в конфигурации веб-пакета:

{
 test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
 loader: 'url-loader?limit=100000'
}

Answer 2

Пытаться

{
   test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
   loader: 'file-loader',
    options: {
       name: '/fonts/[name].[hash].[ext]'
   }
}

Синтаксис относительного пути используется вами. оно должно быть абсолютным. Пожалуйста, дайте мне знать, это помогло