Tạo Chuyển Trang Trong ReactJS với react-router, useHistory và useParams

Việc điều hướng giữa các trang trong ứng dụng web là một kỹ năng quan trọng đối với lập trình viên React. Thư viện react-router-dom giúp triển khai hệ thống định tuyến (routing) trong ứng dụng React một cách linh hoạt và hiệu quả. Bài viết này sẽ hướng dẫn chi tiết cách sử dụng React Router, cách định nghĩa tuyến đường, cũng như cách khai thác các hook như useHistory và useParams.

1. Giới thiệu về React Router – Điều hướng trong SPA

React Router là thư viện giúp bạn tạo hệ thống định tuyến (routing system) cho các ứng dụng React. Thay vì chuyển hướng bằng HTML truyền thống, React Router cho phép bạn điều hướng trong nội bộ ứng dụng, giúp trải nghiệm mượt mà hơn.

Cài đặt:

npm install react-router-dom

Sau đó bạn cần bọc toàn bộ ứng dụng bằng <BrowserRouter>:

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

<BrowserRouter>
  <App />
</BrowserRouter>

2. Tạo Router và liên kết bằng Link

Bạn có thể định nghĩa các tuyến đường bằng Route và tạo liên kết bằng Link.

Ví dụ cơ bản:

import { Route, Switch, Link } from 'react-router-dom';

function App() {
  return (
    <div>
      <Link to="/about">Giới thiệu</Link>
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route path="/about" component={AboutPage} />
      </Switch>
    </div>
  );
}

• Switch giúp đảm bảo chỉ có một Route được render.
• exact là tùy chọn giúp khớp chính xác đường dẫn.

3. Tạo route động với useParams

Với route động, bạn có thể truyền tham số trên URL như /user/:id. Hook useParams sẽ giúp bạn lấy giá trị đó.

Ví dụ:

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

function UserDetail() {
  const { id } = useParams();
  return <p>Chi tiết người dùng có ID: {id}</p>;
}

URL /user/123 sẽ hiển thị Chi tiết người dùng có ID: 123.

4. Điều hướng thủ công bằng useHistory

Hook useHistory cung cấp cho bạn khả năng điều hướng thủ công trong code, ví dụ sau khi người dùng nhấn nút hoặc hoàn thành form.

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

function Login() {
  const history = useHistory();

  const handleLogin = () => {
    // Xử lý đăng nhập
    history.push('/dashboard');
  };

  return <button onClick={handleLogin}>Đăng nhập</button>;
}

Bạn có thể chuyển hướng tới bất kỳ route nào với history.push().

Như vậy, CodeFresher đã chia sẻ cho bạn cách sử dụng thư viện react-router-dom để xây dựng hệ thống định tuyến cho ứng dụng React. Các khái niệm như khởi tạo router, định nghĩa tuyến đường, tạo liên kết điều hướng, sử dụng route động và khai thác các hook như useParams và useHistory đều rất cần thiết khi xây dựng ứng dụng web hiện đại. Việc thành thạo các công cụ này sẽ giúp bạn phát triển ứng dụng React theo hướng chuyên nghiệp và hiệu quả hơn.

Đừng quên theo dõi CodeFresher để cập nhật thông tin mới nhất về các khóa học lập trình!

Link đăng ký khóa học: https://laptrinh-online.vn/courses/tat-ca-khoa-hoc

Địa chỉ: Trung tâm CodeFresher – Số 104 Hoàng Ngân, Cầu Giấy, Hà Nội.

SĐT: Ms Nga – 0968089175 , Ms Diệu – 0332026803 (zalo/call)