Tìm hiểu về React Router

React Router là một API cho các ứng dụng React. React router sử dụng định tuyến động phía máy khách cho phép xây dựng SPA (Single Page Application) với điều hướng mà không cần làm mới trang. Đây là một cách ngày càng phổ biến để mang lại trải nghiệm tốt hơn cho người dùng.

Sử dụng React Router

Cài đặt React Router:

npm i react-router-dom

Import các thành phần cần sử dụng

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

Ngoài ra, có thể đặt các bí danh cho các thành phần, như thành phần BrowserRouter có thế đặt bí danh Router, khi sử dụng sẽ chỉ cần gọi Router.

Các thành phần chính

Có 3 thành phần chính trong React Router:

• Routes, như là <BrowserRouter> và <HashRouter>
• Route Matchers, như là <Route> và <Switch>
• Navigation, như là <Link>, <NavLink> và <Redirect>

1, Routers

Với dúng dụng web, react-router-dom cung cấp 2 component <BrowserRouter> và <HashRouter>. Khác biệt chính giữa 2 routers này là cách chúng lưu trữ URL và giao tiếp mới máy chủ.

• <BrowserRouter> thường được sử dụng hơn, nó sử dụng History API có trong HTML5 để theo dõi lịch sử bộ định tuyến của bạn.
• <HashRouter> lưu trữ vị trí hiện tại trong một phần hash của URL ( cụ thể là window.location.hash)

2, Route Matchers

Có 2 component là Switch và Route. When <Switch> được render, nó sẽ tìm kiếm trong những thành phần con <Route> và lấy <Route> đầu tiên khớp với path và bỏ qua tất cả những <Route> còn lại. Nếu không có <Route> nào khớp, <Switch> sẽ không render gì cả.

Ví dụ:

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

function App() {
  return (
    <div>
      <Switch>
        <Route path="/about">
          <About />
        </Route>

        <Route path="/contact/:id">
          <Contact />
        </Route>
        <Route path="/contact">
          <AllContacts />
        </Route>

        {/* If none of the previous routes render anything,
            this route acts as a fallback.

            Important: A route with path="/" will *always* match
            the URL because all URLs begin with a /. So that's
            why we put this one last of all */}
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </div>
  );
}

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById("root")
);

Có một số lưu ý:

• Luôn đặt route chi tiết lên trước. Như trong ví dụ trên,để có thế để có thể xem được các contact cá nhân phải đặt route có path="/contact/:id" lên trước, nếu đặt route path="/contact" lên trước khi vào các contact cá nhân sẽ render ra component <AllContacts>
• <Route path="/"> luôn match URL, vì vậy luôn đặt Route này ở cuối Switch

3, Navigation

React Router cung cấp component <Link> để tạo nhiều đường dẫn trong ứng dụng. Khi bạn render <Link>, ở góc màn hình trang HTML sẽ xuất hiện đường dẫn

Ví dụ:

<Link to="/">Home</Link> => <a href="/">Home</a>

<NavLink> đặc biệt hơn <Link> là có thể tự style lại chính nó khi nó ở khớp với 1 URL.

Ví dụ:

<NavLink to="/react" activeClassName="hurray">
  React
</NavLink>

Khi URL là "/react", component sẽ render: <a href="/react" class="hurray">React</a>

Khi muốn buộc điều hướng, bạn có thể sử dụng component <Redirect>

Ví dụ: <Redirect to="/login" />

Tham khảo

https://reactrouter.com/web/guides/primary-components