Блог

Внутри общей папки react у меня есть style.css и. index.html Внутри style.css я написал

 *{
   font-family: 'Roboto', sans-serif
}
 

Это означает Roboto , что шрифт применяется ко всем компонентам. Я импортировал Roboto ссылку на шрифт из Google в index.html .
Теперь у App.js меня есть следующие маршруты

 <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/login" component={Login} />
        <Route path="/register" component={Register} />
        <Route path="/profile" component={Profile} />
      </Switch>
    </Router>
 

Теперь, для любого компонента, когда я даю путь вперед-Слэш / и путем, например /profile , тогда он отлично работает, компонент отрисовывается и Roboto шрифт тоже работают, но, если я даю путь вперед-Слэш / и путь, например, /profile и снова после этого, если я добавлю идентификатор пользователя или имя пользователя, как парам /profile/:username , то Roboto шрифт не пострадали, скорее, это отображается по умолчанию шрифт, но, если я удалить :username параметр от /profile/:username и сделать это /profile потом Roboto шрифта снова работает. Так в чем же здесь проблема? Почему шрифт не работает в этом компоненте после добавления / и любого пути или параметров в этом маршруте.

Прежде всего, переместите файл css в свой /src каталог(например, /src/css/styles.css) и в файл, в который все помещается внутри маршрутизатора, импортируйте файл css с помощью:

import "./css/styles.css"

(предполагая, что файл js является каталогом, расположенным в /src каталоге без какой-либо вложенности)