Di dalam folder reaksi publik, saya punya style.css dan index.html. Di dalam style.css saya telah menulis

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

Ini berarti font Roboto diterapkan ke semua komponen. Saya telah mengimpor tautan font Roboto dari google di index.html.
Sekarang di App.js, saya memiliki rute berikut

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

Sekarang, untuk komponen apa pun, ketika saya memberikan pathname sebagai forward-slash / dan pathname, seperti /profile, maka itu berfungsi dengan baik, komponen akan dirender dan font Roboto juga berfungsi tetapi, jika saya memberikan pathname sebagai forward-slash / dan pathname, seperti /profile dan lagi setelah itu, jika saya menambahkan user id atau username param seperti /profile/:username, maka font Roboto tidak terpengaruh, ini menampilkan font default tetapi, jika saya menghapus kembali :username param dari /profile/:username dan membuatnya /profile maka font Roboto berfungsi lagi. Jadi apa masalahnya di sini. Mengapa font tidak berfungsi di komponen itu setelah menambahkan / dan nama path atau params apa pun di rute itu.

0
Prasanga Thapaliya 26 Mei 2021, 19:53

1 menjawab

Jawaban Terbaik

Pertama-tama, pindahkan file css ke direktori /src Anda (mis. /src/css/styles.css), dan di file tempat semuanya dibungkus di dalam router, impor file css dengan:

import "./css/styles.css"

(dengan asumsi file js adalah direktori yang terletak di direktori /src tanpa bersarang)

1
CSBigSur 26 Mei 2021, 19:47