React: React Router - Day 14

Giới thiệu

React-Router là một thư viện định tuyến (routing) tiêu chuẩn trong React. Nó giữ cho giao diện của ứng dụng đồng bộ với URL trên trình duyệt. React-Router cho phép bạn định tuyến "luồng dữ liệu" (data flow ) trong ứng dụng của bạn một cách rõ ràng.

Trong bài viết này, chúng ta sẽ hướng dẫn sử dụng React Router trong functional component, cung cấp một số ví dụ đơn giản về việc sử dụng Route, Link, Separate Routes, Nested Routes và Dynamic Routes.

Cài đặt

Cài đặt React Router bằng cách sử dụng npm hoặc yarn:

npm install react-router-dom
//or
yarn add react-router-dom

Import react-router-dom vào trong file App.tsx:

import { BrowserRouter } from "react-router-dom";

Các thành phần chính

Có 3 thành phần chính trong React Router:

• Routes, như là <BrowserRouter> và <HashRouter>
• Route Matchers, như là <Route> và <Switch>
• Navigation, như là <Link>, <NavLink> và <Redirect>

Sử dụng Route

React-Router cung cấp cho chúng 2 thành phần hay sử dụng đó là BrowserRouter & HashRouter. Hai thành phần này khác nhau ở kiểu URL mà chúng sẽ tạo ra và đồng bộ.

BrowserRouter: Được sử dụng phổ biến hơn, nó sử dụng History API có trong HTML5 để theo dõi lịch sử bộ định tuyến của bạn.

HashRouter: Sử dụng hash của URL (window.location.hash) để ghi nhớ mọi thứ.

Ở đây chúng ta sử dụng BrowserRouter có dạng url/{page}/{id}

Đầu tiên bạn cần wrap toàn bộ application vào trong router

import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App"
import { BrowserRouter } from "react-router-dom"

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
)

Định nghĩa Route

Route là một thành phần quan trọng trong React Router để định nghĩa các route khác nhau trong ứng dụng.

Dưới đây là một ví dụ về cách sử dụng Route trong ReactJs:

import { Route, Routes } from "react-router-dom";

function App() {
  return (
    <div>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
}

Sử dụng Link

Link là một thành phần cho phép chúng ta tạo liên kết giữa các route trong ứng dụng. Dưới đây là một ví dụ về cách sử dụng Link trong ReactJs:

import { Link } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Trang chủ</Link>
        </li>
        <li>
          <Link to="/about">Về chúng tôi</Link>
        </li>
        <li>
          <Link to="/contact">Liên hệ</Link>
        </li>
      </ul>
    </nav>
  );
}

Link to sẽ được biên dịch thành thẻ a href

<ul>
  <li>
    <a href="/">Home</a>
  </li>
  <li>
    <a href="/about">About</a>
  </li>
	<li>
    <a href="/contact">Liên hệ</a>
  </li>
</ul>

Dynamic Routing

React Router cung cấp khả năng tạo các route động, cho phép chúng ta truyền tham số vào các route.

Ví dụ:

import { Link, Route, Routes } from "react-router-dom";

function App() {
  return (
    <>
		  <nav>
				<ul>
				  <li>
					<Link to="/">Home</Link>
				  </li>
				  <li>
					<Link to="/about">About</Link>
				  </li>
				  <li>
					<Link to="/book/1">Book 1</Link>
				  </li>
				</ul>
		  </nav>
		  <Routes>
				<Route path="/" element={<Home />} />
				<Route path="/about" element={<About />} />
				<Route path="/book/:id" element={<Book />} />
		  </Routes>
		</>
  );
}

Trong ví dụ trên, chúng ta sử dụng /:id để định nghĩa một route động, và tham số id sẽ được truyền vào component Book.

import { useParams } from "react-router-dom"

const Book = () => {
    const { id } = useParams()
    return (
        <div>
          <h2>Book {id}</h2>
        </div>
      );
};

export default Book;

Nested Routes

React Router cũng hỗ trợ việc tạo các route lồng nhau. Điều này cho phép chúng ta xây dựng các route phức tạp trong ứng dụng.

import { Link, Route, Routes } from "react-router-dom";

function App() {
  return (
    <div>
       <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/book">Book List</Link>
          </li>
          <li>
            <Link to="/book/1">Book 1</Link>
          </li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/book">
          <Route index element={<BookList />} />
          <Route path=":id" element={<Book />} />
        </Route>
	</Routes>
    </div>
  );
}