Định dạng URL và Routing trong React - Hướng dẫn sử dụng React Router

Hướng dẫn chi tiết về cách định dạng URL và quản lý routing trong ứng dụng React bằng cách sử dụng thư viện React Router. Tìm hiểu cách cài đặt React Router.

Cài đặt React Router

Mở thư mục dự án trong terminal và chạy lệnh sau để cài đặt React Router: npm install react-router-dom

Import các thành phần cần thiết từ React Router vào trong thành phần React của bạn.

Định nghĩa các Route

Sử dụng thành phần <BrowserRouter> để bao bọc ứng dụng React và tạo một định dạng URL base.

Sử dụng thành phần <Route> để định nghĩa các route trong ứng dụng.

Ví dụ:

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

function App() {
  return (
    <BrowserRouter>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/products" component={Products} />
    </BrowserRouter>
  );
}

Định nghĩa các Link

Sử dụng thành phần <Link> để tạo các liên kết điều hướng trong ứng dụng.

Ví dụ:

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

function Navigation() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/products">Products</Link>
        </li>
      </ul>
    </nav>
  );
}

Truy cập các tham số đường dẫn

Sử dụng thành phần <Route> với thuộc tính path có định dạng /users/:id để truy cập các tham số đường dẫn.

Trong thành phần con được định nghĩa bởi <Route>, bạn có thể sử dụng useParams() để truy cập các giá trị của các tham số đường dẫn.

Ví dụ:

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

function User() {
  const { id } = useParams();

  return <div>User ID: {id}</div>;
}

Sử dụng Switch và Redirect

Sử dụng thành phần <Switch> để chỉ hiển thị route đầu tiên khớp với đường dẫn.

Sử dụng thành phần <Redirect> để chuyển hướng người dùng từ một đường dẫn đã xác định đến một đường dẫn khác.

Ví dụ:

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

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/products" component={Products} />
        <Redirect to="/" />
      </Switch>
    </BrowserRouter>
  );
}

Trên đây là một số khái niệm cơ bản về định dạng URL và routing trong React sử dụng React Router. Bằng cách sử dụng React Router, bạn có thể tạo các ứng dụng React linh hoạt với khả năng điều hướng và hiển thị nội dung đa dạng dựa trên URL.