React Router

React Router merupakan modul yang berfungsi untuk menangani proses navigasi pada single page application. Pada React, modul ini terpisah dari corenya sehingga perlu dilakukan instalasi modul dengan nama react-router-dom.

Instalasi React Router
  1. Buatlah sebuah proyek baru menggunakan create-react-app
  2. Pindah direktori ke direktori proyek yang telah dibuat
  3. Instalasi react-router-dom menggunakan npm atau yarn
React Router


React Router

Terdapat 3 kategori dari komponen dalam React Router:
  1. Routers, seperti <BrowserRouter> dan <HashRouter>
  2. Route Matchers, seperti <Route> dan <Switch>
  3. Navigation, seperti <Link>, <NavLink> dan <Redirect>
  4. Semua komponen ini dapat diimpor dari react-router-dom

Routers

Inti dari setiap aplikasi yang menggunakan React Router haruslah komponen dengan tipe Router.
  1. <BrowserRouter>
    • menggunakan path URL regular
    • contoh: http://example.com/shop/item
  2. <HashRouter>
    • menyimpan lokasi dengan hash pada URL
    • contoh: http://example.com/shop.html#cart

Route Matchers
  1. Terdapat 2 komponen route matcher yaitu <Switch> dan <Route>
  2. Ketika <Switch> di render, maka akan dicari elemen <Route> yang memiliki path yang paling cocok dengan URL saat ini
  3. Bila ditemukan, aplikasi akan langsung me-render <Route> yang sesuai dan mengabaikan elemen <Route> yang lainnya
  4. Bila tidak ditemukan, maka <Switch> akan mengembalikan nilai null

Route Matchers

Tips:
  1. Letakkan <Route> dengan path yang lebih spesifik sebelum <Route> yang memiliki path lebih umum
  2. <Route path=“/”> akan match dengan seluruh path, sehingga perlu diletakkan di bagian paling akhir. Alternatifnya, bisa gunakan <Route exact path=“/”>
  3. Meskipun <Router> dapat dirender di luar <Switch>, tetap gunakan hook useRouteMatch

Navigation

Terdapat 3 jenis Navigation
  1. <Link> - komponen ini akan merender tag <a> ke dokumen HTML
  2. <NavLink> - komponen mendukung style “active” ketika propertinya cocok dengan lokasi saat ini
  3. <Redirect> - komponen yang akan memaksa aplikasi untuk navigasi ke lokasi lain

Kesimpulan

React Router merupakan modul untuk menangani navigasi tampilan