При переходе по роутам меняется адрес, по которому запрашиваются статические файлы (фавиконки), как с этим бороться?

Для роутинга используется React Router 5, схема примерно такая (подробнее здесь):

<div className="App">
  <Header />
    <Switch>
       <Route exact path="/page1" component={Page1} />
       <Route exact path="/page2" component={Page2} />
       <Redirect to="/page1" />
     </Switch>
   <Footer />
</div>

И почему-то при переходе по роутам меняется адрес, по которому запрашиваются статические файлы. Например, было: http://localhost:8080/icons/favicon.png , но после перехода по роуту на адрес http://localhost:8080/page1, фавиконку периодически пытается запрашивать уже с адреса http://localhost:8080/page1/icons/favicon.png, естественно, получая в ответ ошибку 404. Ошибки не критичные, но портят внешний вид консоли. Возможно, кто-нибудь может дать совет, как с этим бороться.


Ответы (1 шт):

Автор решения: RTW

В хедере нужно указать base href:

<head>
  <base href="/">
</head>

Все относительные пути будут считаться от него.

→ Ссылка