React Router: Quản Lý Điều Hướng (Routing) Trong React

React Router là một thư viện mạnh mẽ giúp bạn xây dựng các ứng dụng React với khả năng điều hướng giữa các trang một cách dễ dàng và linh hoạt mà không cần tải lại toàn bộ trang web. Trong bài viết này, chúng ta sẽ tìm hiểu:

1. React Router là gì?
2. Cài đặt React Router
3. Các thành phần chính trong React Router
4. Ví dụ cơ bản với React Router
5. Routing nâng cao

1. React Router là gì?

React Router là một thư viện định tuyến phổ biến trong React, cho phép bạn:

• Xây dựng các ứng dụng Single Page Application (SPA).
• Quản lý điều hướng giữa các trang mà không cần tải lại trình duyệt.
• Hỗ trợ Dynamic Routing (định tuyến động).
• Cho phép Nested Routes (định tuyến lồng nhau).
• Xử lý các trường hợp 404 Not Found.

Hiện tại, phiên bản phổ biến nhất là React Router v6 với cú pháp rõ ràng và dễ hiểu hơn.

2. Cài đặt React Router

Để sử dụng React Router, bạn cần cài đặt gói thư viện:

npm install react-router-dom						

Nếu bạn dùng Yarn:

yarn add react-router-dom						

3. Các Thành Phần Chính Trong React Router

4. Ví Dụ Cơ Bản với React Router

Cấu Trúc Dự Án

/src  						
├── App.js  						
├── index.js  						
├── pages/  						
│   ├── Home.js  						
│   ├── About.js  						
│   ├── Contact.js  						
├── components/  						
│   ├── Navbar.js  						

1. Cấu Hình Router (App.js)

import React from "react";						
import { BrowserRouter, Routes, Route } from "react-router-dom";						
import Navbar from "./components/Navbar";						
import Home from "./pages/Home";						
import About from "./pages/About";						
import Contact from "./pages/Contact";						
							
function App() {						
	  return (						
	    <BrowserRouter>						
	      <Navbar />						
	      <Routes>						
	        <Route path="/" element={<Home />} />						
	        <Route path="/about" element={<About />} />						
	        <Route path="/contact" element={<Contact />} />						
	        <Route path="*" element={<h2>404 - Page Not Found</h2>} />						
	      </Routes>						
	    </BrowserRouter>						
	  );						
}						
							
export default App;						

2. Tạo Navbar (components/Navbar.js)

import React from "react";						
import { Link } from "react-router-dom";						
							
function Navbar() {						
	  return (						
	    <nav>						
	      <ul>						
	        <li><Link to="/">Home</Link></li>						
	        <li><Link to="/about">About</Link></li>						
	        <li><Link to="/contact">Contact</Link></li>						
	      </ul>						
	    </nav>						
	  );						
}						
							
export default Navbar;						

3. Tạo Các Trang Cơ Bản

pages/Home.js:

import React from "react";						
function Home() {						
	  return <h1>Welcome to the Home Page!</h1>;						
}						
export default Home;						

pages/About.js:

import React from "react";						
function About() {						
	  return <h1>About Us</h1>;						
}						
export default About;						

pages/Contact.js:

import React from "react";						
function Contact() {						
	  return <h1>Contact Us</h1>;						
}						
export default Contact;						

5. Routing Nâng Cao

5.1 Nested Routes (Định tuyến lồng nhau)

Bạn có thể sử dụng Outlet để hiển thị các route con:

<Route path="/dashboard" element={<Dashboard />}>						
	  <Route path="settings" element={<Settings />} />						
	  <Route path="profile" element={<Profile />} />						
</Route>						

Dashboard.js:

import React from "react";						
import { Outlet } from "react-router-dom";						
							
function Dashboard() {						
	  return (						
	    <div>						
	      <h1>Dashboard</h1>						
	      <Outlet />						
	    </div>						
	  );						
}						
export default Dashboard;						

5.2 useNavigate (Điều hướng bằng mã JavaScript)

import React from "react";						
import { useNavigate } from "react-router-dom";						
							
function Login() {						
	  const navigate = useNavigate();						
							
	  const handleLogin = () => {						
	    // Điều hướng sau khi login						
	    navigate("/dashboard");						
	  };						
							
	  return (						
	    <button onClick={handleLogin}>Login</button>						
	  );						
}						
export default Login;						

6. Tóm Tắt Kiến Thức

7. Kết Luận

React Router là công cụ mạnh mẽ giúp bạn xây dựng ứng dụng SPA dễ dàng và hiệu quả. Bạn nên:

• Nắm rõ các thành phần cơ bản như Routes, Route, Link.
• Hiểu cách sử dụng useNavigate để điều hướng.
• Áp dụngNested Routes để tổ chức cấu trúc ứng dụng rõ ràng.