Pemasangan React Router dalam Aplikasi Redux

Dalam pelajaran sebelumnya, kita telah memasang alat-alat asas untuk bekerja dengan Redux. Selalunya berlaku bahawa aplikasi memerlukan penghala untuk navigasi di antara halaman webnya dan aplikasi kita tidak akan menjadi pengecualian. Untuk ini kita akan memasang pustaka React Router.

Buka projek kita dan taip dalam terminal perintah berikut:

npm install react-router-dom

Melihat ke hadapan sedikit, saya ingin katakan bahawa aplikasi Redux kita secara tradisional didedikasikan untuk produk, maklumat tentangnya dikeluarkan oleh beberapa penjual. Oleh itu, sekarang kita akan mengubah suai sedikit komponen utama App, dan juga menambahkan fungsi untuk melaksanakan penghalaan dalam aplikasi.

Pertama, masuk ke folder src, kemudian ke app dan buat fail root.jsx di sini. Ini akan menjadi akar laman web kita: di sebelah kiri kita akan mempunyai menu, dan di sebelah kanan - kandungan (buat masa sekarang kita hanya mempunyai tajuk di sini):

function 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 pertama saya!</h2>
				<hr></hr>
			</div>
		</div>
	)
}

export default Root

Dan komponen App akan kita ubah suai. Pertama, padamkan keseluruhan kandungannya. Kemudian import dua fungsi untuk penghala dan komponen akar kita Root:

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

Di bawah selepas import, buat penghala, dan tulis laluan pertama, berikannya Root kita sebagai elemen yang dipaparkan dan, dengan itu, menetapkan laluan kepada '/'. Pada masa hadapan, dalam App kita akan menambah laluan lain yang diperlukan:

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

Di bawah, tulis kod fungsi App:

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

export default App

Selesai. Jalankannya. Dalam bahagian seterusnya kita akan melaksanakan komponen untuk kerja aplikasi Redux.

Akhir sekali, mari tambah sedikit kecantikan, dengan menulis gaya untuknya dalam index.css:

body {
	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;
}

Tambahkan React Router ke dalam aplikasi anda.

Biarkan aplikasi anda berkaitan dengan pelajar, maklumat tentangnya akan dikeluarkan oleh pensyarah. Dengan mengambil kira ini, buat komponen akar Root. Ubah suai komponen App seperti diterangkan dalam pelajaran.