18. Router Trong React JS

Trong React JS, bạn có thể sử dụng thư viện React Router để quản lý việc điều hướng và tạo các route cho ứng dụng của bạn. React Router giúp bạn xác định các thành phần của ứng dụng sẽ được hiển thị khi người dùng điều hướng đến các URL khác nhau. Dưới đây là một ví dụ về cách bạn có thể sử dụng React Router:

Cài đặt React Router: Đầu tiên, bạn cần cài đặt React Router vào dự án của mình bằng lệnh sau:

npm install react-router-dom

Hoặc sử dụng Yarn:

csharp

yarn add react-router-dom
Sử dụng Router: Sau khi cài đặt xong, bạn có thể bắt đầu sử dụng React Router trong ứng dụng của bạn. Dưới đây là một ví dụ cơ bản:

jsx

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

const Home = () => <h1>Home Page</h1>;
const About = () => <h1>About Page</h1>;
const Contact = () => <h1>Contact Page</h1>;

const App = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
};

export default App;

Trong ví dụ trên, chúng ta đã sử dụng các thành phần của React Router như BrowserRouter, Route, Switch và Link. BrowserRouter đóng vai trò là một router cho ứng dụng. Route xác định các thành phần sẽ được hiển thị dựa trên URL. Switch đảm bảo chỉ có một route được hiển thị tại một thời điểm. Link được sử dụng để tạo các liên kết điều hướng giữa các trang.

Trong ví dụ này, khi bạn truy cập các URL khác nhau (ví dụ: “/about”, “/contact”), các thành phần tương ứng sẽ được hiển thị. Trên đây là giới thiệu cách sử dụng Router trong React JS.

Leave a Comment Cancel Reply