Master React Router SPA Page Navigation With V6: A Real Battle Guide

Have you ever felt frustrated having to manage dozens of states just to display the correct component in a Single Page Application (SPA)? I was immersed in that quagmire in my early days as a Frontend developer. It wasn't until the release of React Router to navigate SPA pages with v6 that it completely changed the way we think about ReactJS project structure. It is not just a library, but a lifeline that makes routing clearer, more powerful, and much easier. At Pham Hai, my team and I always consider this an indispensable gold standard for all modern web systems.

What is React Router v6 that makes Frontend people so "crazy"?

React Router v6 is a groundbreaking version of the standard routing library for React, making URL management and navigation between pages in web applications seamless. This version brings cleaner syntax, optimized bundle sizes and introduces a series of powerful hooks.

Based on the latest updates as of March 2026, React Router v6 (and Tien Tien v7 platform) continues to affirm its unique position in the Web applications segment. This library helps you build smooth multi-page applications, switching interfaces instantly without reloading the entire browser. What is React Router v6? Simply, it is the "nervous system" that connects disparate UI pieces into a unified flow of experience.

Changing mindset: From "component display" to true "routing" in SPA.

Instead of using internal state to hide/show the interface, routing actually uses the URL as the source of truth to decide which UI is rendered. This helps synchronize the interface state with the browser's address bar.

Trước đây, nhiều bạn mới học thường lạm dụng useState để chuyển đổi giữa trang Chủ và trang Giới thiệu. Cách làm thủ công này vô tình phá vỡ History stack (lịch sử duyệt web), khiến nút Back/Forward của trình duyệt trở nên vô dụng. Với Routing (định tuyến) chuyên nghiệp, mỗi trạng thái UI được gắn liền với một URL cụ thể. Điều này góp phần nâng cao UI/UX (trải nghiệm người dùng) đáng kể, cho phép người dùng bookmark hoặc chia sẻ link chính xác đến màn hình họ đang xem.

Quick comparison with v5: Valuable upgrades that you can't ignore.

So với v5, bản v6 loại bỏ <Switch>, thay bằng <Routes>, đồng thời thay thế useHistory bằng useNavigate linh hoạt hơn. Kích thước thư viện cũng được giảm thiểu đáng kể, hỗ trợ Performance optimization (tối ưu hiệu suất) tốt hơn cho dự án.

If you've ever struggled with route declaration order in v5, v6 has completely solved it with a smart matching algorithm. Components (Link, NavLink, Outlet, Route, Routes, BrowserRouter) have been redesigned to operate more consistently and type-safely.

Đặc biệt, thuộc tính exact rườm rà đã bị loại bỏ hoàn toàn. Nếu bạn chưa vững nền tảng về component và luồng dữ liệu, việc tham khảo bài viết Học React JS từ đầu cho người mới là bước đầu tiên quan trọng trước khi đào sâu vào các cơ chế routing phức tạp.

Start the project: Install React Router DOM and build the first skeleton

Để bắt đầu, bạn cần cài đặt gói react-router-dom qua npm hoặc yarn, sau đó bọc toàn bộ ứng dụng bằng component BrowserRouter. Đây là nền tảng thiết yếu để kích hoạt khả năng định tuyến cho mọi ứng dụng SPA dùng React.

React Router DOM là gì? Khác với lõi react-router dùng chung cho cả môi trường web và native, react-router-dom là thư viện chuyên biệt cung cấp các API xử lý DOM trực tiếp cho trình duyệt. Bất kỳ tài liệu Hướng dẫn sử dụng React Router cho SPA nào cũng sẽ yêu cầu bạn bắt đầu từ việc thiết lập bộ khung cốt lõi này.

Lệnh npm install react-router-dom và những gì bạn cần biết.

Lệnh này tải xuống và thêm thư viện định tuyến chính thức vào file package.json của dự án. Bạn cần đảm bảo đang mở terminal ở thư mục gốc của dự án trước khi chạy lệnh để tránh lỗi cài đặt.

Cách cài đặt React Router DOM cực kỳ nhanh chóng. Bạn chỉ cần mở terminal và gõ:

• npm install react-router-dom (đối với npm)
• yarn add react-router-dom (đối với yarn)

This library takes full advantage of the power of modern JavaScript and is perfectly compatible with projects created with Vite. Unlike other frameworks that have automatic built-in routing, understanding What is Next.js and project creation instructions will show you that Next.js uses file-system routing, while in pure React, we need to manually install and define routes explicitly.

Diamond Structure: Learn about BrowserRouter, Routes and Routes.

BrowserRouter kết nối ứng dụng với URL trình duyệt, Routes đóng vai trò ranh giới bao bọc, và Route định nghĩa ánh xạ giữa một đường dẫn cụ thể với một component tương ứng.

Đây là bộ ba quyền lực bạn sẽ sử dụng trong mọi file App.jsx. BrowserRouter (from react-router-dom) sử dụng HTML5 history API để giữ cho giao diện luôn đồng bộ với URL. Khi thiết lập kiến trúc, bạn thường đặt các Layout components (component bố cục) như Header, Sidebar, Footer bên ngoài thẻ Routes. Nhờ vậy, chúng sẽ không bị render lại một cách lãng phí khi người dùng chuyển trang. Bên trong Routes, bạn khai báo danh sách các Route trỏ đến từng trang cụ thể.

Bloody experience: Create a "polite" 404 page for users.

Trang 404 được tạo bằng cách thêm một <Route path="*" element={<NotFound />} /> ở cuối cùng của danh sách route. Dấu sao (*) sẽ đóng vai trò bắt mọi URL không khớp với bất kỳ route nào đã định nghĩa ở trên.

Không có gì tệ hơn việc người dùng truy cập một link hỏng và thấy màn hình trắng bóc hoặc lỗi console đỏ rực. Tại Phạm Hải, mình luôn yêu cầu team thiết kế một trang 404 thật thân thiện, có nút quay về trang chủ rõ ràng. Đôi khi, bạn cũng có thể dùng component <Navigate to="/" /> để thiết lập Redirect (chuyển hướng) người dùng thẳng về trang chủ thay vì hiển thị lỗi 404, tùy thuộc vào logic nghiệp vụ của từng dự án.

Understanding the Hooks in React Router: How do useNavigate and useParams help?

Các hooks trong React Router cung cấp cách thức truy cập trạng thái của bộ định tuyến trực tiếp từ bên trong function component. useNavigate và useParams là hai công cụ phổ biến và mạnh mẽ nhất để điều hướng luồng và trích xuất dữ liệu từ URL.

Việc loại bỏ hoàn toàn các class component đã mở đường cho kỷ nguyên thống trị của Hooks (useNavigate, useParams, useLocation, useHistory, useRouteMatch). Lưu ý quan trọng là ở v6, useHistory và useRouteMatch đã bị khai tử hoặc thay thế, giúp hệ thống API trở nên tinh gọn, nhất quán và dễ nhớ hơn rất nhiều cho lập trình viên.

How to use useNavigate: Programmatic navigation in React Router has never been easier.

useNavigate trả về một hàm cho phép bạn chuyển trang bằng code logic thay vì ép người dùng phải click thủ công vào thẻ Link. Nó cực kỳ hữu ích để xử lý luồng sau khi submit form hoặc gọi API thành công.

Cách sử dụng useNavigate trong React Router rất trực quan. Bạn chỉ cần gọi const navigate = useNavigate(); ở đầu component, và sau đó dùng navigate('/dashboard') ở bất kỳ đâu để chuyển hướng. Kỹ thuật Điều hướng programmatic trong React Router này giúp bạn kiểm soát hoàn toàn trải nghiệm người dùng. Tương tự như cách bạn làm chủ state, việc kết hợp useNavigate với các kiến thức trong React Hooks useState useEffect hướng dẫn sẽ giúp bạn xử lý logic điều hướng cực kỳ linh hoạt và chủ động.

What is useParams React Router used for? The secret to getting dynamic URL parameters.

useParams được dùng để trích xuất các tham số động từ thanh URL (ví dụ: ID sản phẩm trong đường dẫn /product/:id). Hook này trả về một object chứa các cặp key-value tương ứng với định nghĩa route.

When working with Dynamic routes, you cannot create thousands of static routes for each product in the database. So what is useParams React Router used for? It is the universal key to solving this problem through URL parameters. After getting the ID from useParams, the next step is usually to use Fetch API to call the REST API with JavaScript to download the corresponding detailed data from the server and display it on the screen.

Difference between Link and NavLink: When should you use which "you" to look cool?

Cả hai đều dùng để chuyển trang mà không reload lại trình duyệt, nhưng NavLink có thêm khả năng nhận biết nó có đang là route hiện tại (active) hay không để tự động thêm class CSS.

Khác biệt giữa Link và NavLink trong React Router chủ yếu nằm ở tính năng styling tự động.

Nếu bạn chỉ cần một liên kết đơn thuần ở footer, hãy dùng Link. Nhưng nếu bạn đang làm menu điều hướng chính (Navbar) và muốn bôi đậm tab đang đứng, NavLink là sự lựa chọn hoàn hảo. Thuộc tính className của NavLink nhận vào một callback function trả về trạng thái isActive, giúp việc tùy biến giao diện trở nên nhẹ nhàng.

Build complex layouts with Nested Routes: As easy as building LEGO blocks

Nested Routes allow you to nest routes within each other, creating clear hierarchical UI structures. Parent components will wrap and determine the display position of child components within them.

As the application grows, maintaining a flat route list will cause terrible layout duplication. This is where the nested structure comes into play, helping you reuse shared interface elements (like menu bars, sidebars) thoroughly.

How do Nested Routes in React Router v6 work?

Bạn định nghĩa các thẻ <Route> con nằm trực tiếp bên trong một <Route> cha. URL của route con sẽ tự động nối tiếp vào URL của route cha, tạo ra một đường dẫn phân cấp logic.

Nested Routes trong React Router v6 hoạt động như thế nào? Rất đơn giản, thay vì tự đóng thẻ <Route />, bạn mở thẻ <Route> cha và đặt các route con vào giữa. Ví dụ, nếu route cha là /dashboard và route con là settings, thì đường dẫn thực tế trên trình duyệt để truy cập sẽ là /dashboard/settings. Cơ chế này giúp mã nguồn của bạn phản ánh chính xác cấu trúc thư mục và UI thực tế của ứng dụng.

What is React Router Outlet? Magic gate to render child routes.

Outlet là một component đóng vai trò như một placeholder (vị trí giữ chỗ) bên trong component cha. Nó xác định chính xác tọa độ mà các component con của route đó sẽ được render ra màn hình.

React Router Outlet là gì và cách dùng ra sao? Khi bạn đã thiết lập Nested Routes, component cha cần biết phải vẽ component con ở đâu trong mã HTML của nó. Bạn chỉ cần import <Outlet /> từ thư viện và đặt nó vào phần thân của layout. Nếu quên đặt Outlet, dù URL trên trình duyệt có khớp hoàn toàn, giao diện con cũng sẽ không bao giờ xuất hiện. Đây là một khái niệm cốt lõi mà mọi lập trình viên React cần khắc cốt ghi tâm.

Real-life example: Build a Dashboard layout with a fixed sidebar.

Bạn tạo một component DashboardLayout chứa Sidebar cố định bên trái và đặt thẻ <Outlet /> ở vùng nội dung bên phải. Mọi route con như Thống kê, Cài đặt sẽ tự động chui vào vùng Outlet này.

Hãy tưởng tượng bạn đang làm trang quản trị hệ thống. Sidebar và Header luôn đứng im, chỉ có phần nội dung chính giữa thay đổi khi click menu. Bằng cách dùng DashboardLayout làm route cha, mỗi khi dùng React Router điều hướng trang SPA, chỉ duy nhất vùng <Outlet /> bị re-render. Điều này tối ưu hóa hiệu suất đáng kể vì trình duyệt không phải tính toán và vẽ lại toàn bộ khung trang từ đầu.

Advanced tips for professionals: Optimization and security

To make your application meet enterprise standards, you need to apply source code splitting techniques and protect sensitive paths from unauthorized access.

Once you have mastered the basic features, upgrading the application with security standards and page loading speed is a mandatory step. At Pham Hai, real projects are always strictly required to apply these advanced techniques to ensure the best output quality.

Lazy Loading with React Router: Increase initial page load speed for SPA.

Bằng cách kết hợp hàm React.lazy() và component <Suspense>, bạn có thể tách mã nguồn của từng trang thành các file riêng biệt. Trình duyệt sẽ chỉ tải file đó qua mạng khi người dùng thực sự chuyển hướng vào route tương ứng.

Code splitting is a vital technique to save large applications. Lazy Loading with React Router v6/v7 helps minimize the download bundle file size on the first visit.

• Thay vì import trực tiếp, bạn khai báo: const Profile = lazy(() => import('./Profile'));.
• Bọc Routes bằng <Suspense fallback={<LoadingSpinner />}>.

Thanks to that, users don't have to wait for all the thousands of lines of code on the Profile page to load if they are just surfing the Home page. This feature contributes greatly to improving Core Web Vitals scores.

Authentication with React Router: Build Protected Routes to protect "territory".

Protected Routes là một component bọc ngoài (wrapper) có nhiệm vụ kiểm tra trạng thái đăng nhập trước khi render. Nếu người dùng chưa đăng nhập, nó sẽ dùng thẻ Navigate để đẩy họ về trang Login ngay lập tức.

Xác thực (Authentication) với React Router không phải là một API có sẵn để gọi, mà là một pattern (mẫu thiết kế) bạn phải tự tay xây dựng. Authentication (xác thực người dùng) yêu cầu bạn tạo một component PrivateRoute. Component này sẽ đọc token; nếu hợp lệ thì trả về <Outlet />, ngược lại thì chuyển hướng. Để quản lý trạng thái đăng nhập toàn cục cho các Protected routes (route được bảo vệ) một cách đồng bộ, việc sử dụng Redux Toolkit quản lý state React hiện đại là một lựa chọn tối ưu mà mình luôn ưu tiên áp dụng.

Transfer data between routes: Cool ways you may not know.

Bạn có thể truyền dữ liệu ẩn một cách an toàn thông qua thuộc tính state của hàm useNavigate hoặc thẻ Link. Ở route đích, bạn chỉ cần dùng hook useLocation để trích xuất dữ liệu này ra sử dụng.

Truyền dữ liệu giữa các route trong React Router không chỉ giới hạn ở việc nối chuỗi vào URL parameters. Đôi khi bạn muốn truyền cả một object chứa thông tin user phức tạp mà không muốn phơi bày nó lên thanh địa chỉ. Lúc này, truyền qua state là giải pháp hoàn hảo và bảo mật. Tuy nhiên, hãy nhớ rằng dữ liệu này được lưu trữ trong History stack của trình duyệt, nên nếu người dùng copy URL sang một tab ẩn danh mới hoàn toàn, dữ liệu state đó sẽ bị reset và biến mất.

Basically, mastering the technique of using React Router to navigate SPA pages means you have the key to building smooth, logical and professional applications. Don't see it as a complicated library with dozens of rigid rules, see it as a powerful teammate to help you organize your code better. Instead of mechanically copying code from tutorials, really take the time to understand the nature of each component and hook, and you will see how powerful it is in real projects.

Have you ever encountered any "hard cases" or hidden bugs with React Router while coding? Please share right away in the comments section below, we and everyone will analyze and find a solution together!

Lưu ý: Thông tin trong bài viết này chỉ mang tính chất tham khảo. Để có lời khuyên tốt nhất, vui lòng liên hệ trực tiếp với chúng tôi để được tư vấn cụ thể dựa trên nhu cầu thực tế của bạn.