Instalasi React Router di Aplikasi Redux

Pada pelajaran sebelumnya, kita telah menginstal alat-alat utama untuk bekerja dengan Redux. Sering terjadi bahwa aplikasi membutuhkan router untuk navigasi di antara halaman web-nya dan aplikasi kita tidak akan menjadi pengecualian. Untuk itu kita akan menginstal library React Router.

Mari buka proyek kita dan ketik di terminal perintah berikut:

terminalnpm install react-router-dom

Melihat sedikit ke depan, saya katakan bahwa aplikasi Redux kita secara tradisional didedikasikan untuk produk, informasi tentang yang diposting oleh beberapa penjual. Oleh karena itu sekarang kita akan sedikit mengubah komponen utama App, dan juga menambahkan fungsionalitas ke aplikasi untuk melakukan routing.

Pertama-tama, mari masuk ke folder src, lalu ke app dan buat file root.jsx di sini. Ini akan menjadi root situs kita: di sebelah kiri kita akan memiliki menu, dan di sebelah kanan - konten (untuk saat ini kita hanya memiliki judul di sini):

app/root.jsxfunction Root() {
  return (
    <div id="main">
      <div id="menu">
        <nav>
          <a>Products</a>
          <a>Sellers</a>
        </nav>
      </div>
      <div id="main_page">
        <h2>Ini adalah aplikasi Redux pertamaku!</h2>
        <hr></hr>
      </div>
    </div>
  )
}

export default Root

Dan komponen App akan kita ubah. Pertama-tama hapus seluruh isinya. Kemudian impor dua fungsi untuk router dan komponen root kita Root:

App.jsximport { createBrowserRouter, RouterProvider } from 'react-router-dom'
import Root from './app/root'

Di bawah setelah impor, buat router, dan tulis rute pertama, berikan Root kita sebagai elemen yang ditampilkan dan, sesuai, atur path ke '/'. Kemudian di App kita akan menambahkan rute lain yang diperlukan:

App.jsxconst router = createBrowserRouter([{ path: '/', element: <Root /> }])

Di bawah tulis kode fungsi App:

App.jsxfunction App() {
  return <RouterProvider router={router} />
}

export default App

Selesai. Jalankan. Di bagian selanjutnya kita akan mengimplementasikan komponen untuk bekerja dengan aplikasi Redux.

Terakhir, mari tambahkan sedikit keindahan dengan menulis style untuk itu di index.css:

index.cssbody {
  font-size: 24px;
  line-height: 1.5;
}

nav {
  display: flex;
  flex-direction: column;
}

ul {
  list-style: none;
  padding: 0;
}

h1, h2, h3 {
  margin: 0;
}

a {
  text-decoration: none;
  color: blue;
  cursor: pointer;
}

#main {
  display: flex;
  margin: 20px;
}

#menu {
  margin-right: 50px;
  padding-top: 50px;
  padding-right: 50px;
  border-right: 2px solid lightgray;
  font-weight: bold;
}