Hiểu Route React nâng cao trong 10 phút bằng ví dụ

React Router là một thư viện quan trọng và phổ biến trong các ứng dụng React, giúp quản lý việc điều hướng giữa các trang và các thành phần của ứng dụng. Với React Router, việc quản lý đường dẫn và hiển thị nội dung trở nên dễ dàng hơn bao giờ hết.

Trong bài viết này, tôi sẽ giới thiệu với các bạn về React Router, cung cấp một cái nhìn tổng quan về các thành phần chính của nó và cách sử dụng chúng để quản lý tuyến đường trong ứng dụng của bạn.

I. React Router là gì?

React Router là một thư viện phổ biến trong việc xử lý định tuyến (routing) và điều hướng (navigation) trong các ứng dụng React. Nó cho phép bạn định nghĩa các đường dẫn (routes) và liên kết chúng với các component tương ứng. React Router cung cấp một API được định nghĩa rõ ràng, giúp cho việc xử lý định tuyến và hiển thị các component dựa trên đường dẫn URL hiện tại trở nên dễ dàng hơn.

II. Các Components trong React Router

1. BrowserRouter trong react router js :

Nếu bạn muốn định tuyến ứng dụng của mình trong ReactJS, bạn cần sử dụng một số thành phần quan trọng, bao gồm BrowserRouter.

Bài viết này được đăng tại [free tuts .net]

BrowserRouter là một thành phần chính của React Router, giúp đồng bộ hóa địa chỉ URL của ứng dụng với trạng thái của ứng dụng. Về cơ bản, nó là một thành phần bao bọc cho toàn bộ ứng dụng ReactJS của bạn và quản lý việc định tuyến cho tất cả các trang trong ứng dụng.

Để sử dụng BrowserRouter trong ứng dụng ReactJS, bạn cần import nó từ thư viện `react-router-dom`, như sau:

import { BrowserRouter } from "react-router-dom";

Sau đó, bạn có thể bọc toàn bộ ứng dụng của mình trong BrowserRouter component, như sau:

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

Ở đây, App là component chính của ứng dụng của bạn, và nó được bọc trong BrowserRouter. Bây giờ, React Router sẽ quản lý định tuyến cho tất cả các Route của ứng dụng của bạn, sử dụng HTML5 history API để đồng bộ hóa địa chỉ URL với trạng thái của ứng dụng của bạn.

2. Route trong react router js :

Route là một thành phần quan trọng trong React Router, cho phép bạn định nghĩa các tuyến đường và cách hiển thị nội dung của chúng. Route sẽ kiểm tra URL của trang web và hiển thị nội dung tương ứng với tuyến đường nào được khớp với URL đó.

Bạn có thể định nghĩa các tuyến đường bằng cách sử dụng Route component và truyền vào prop path để chỉ định đường dẫn của tuyến đường. Sau đó, bạn có thể truyền component hoặc render function vào prop component hoặc render, tương ứng với nội dung cần hiển thị cho tuyến đường đó.

Ví dụ, để định nghĩa một tuyến đường cho trang chủ, bạn có thể sử dụng Route component như sau:

import { Route } from "react-router-dom";
import HomePage from "./pages/HomePage";

function App() {
  return (
    <div>
      <Route exact path="/" component={HomePage} />
    </div>
  );
}
export default App;

Trong ví dụ trên, chúng ta đã sử dụng Route component để định nghĩa tuyến đường cho trang chủ, bằng cách:

+ Chỉ định đường dẫn của tuyến đường bằng prop `path`.

+ Sử dụng prop `exact` để đảm bảo rằng tuyến đường chỉ khớp với đường dẫn chính xác của trang chủ.

+ Truyền component HomePage vào prop `component` để hiển thị nội dung cho tuyến đường này.

Ngoài ra, bạn có thể sử dụng các prop khác của Route để định nghĩa các tuyến đường phức tạp hơn, chẳng hạn như các tuyến đường có tham số động.

Ví Dụ:

iimport { Route } from 'react-router-dom';
import PostPage from './pages/PostPage';

function App() {
  return (
    <div>
      <Route path="/posts/:postId" render={(props) => <PostPage postId={props.match.params.postId} />} />
    </div>
  );
}
export default App;

Trong ví dụ trên, chúng ta đã sử dụng Route component để định nghĩa tuyến đường cho một bài đăng cụ thể, bằng cách sử dụng dấu hai chấm (:) để chỉ định tên của tham số và sử dụng các props "exact", "strict" và "sensitive" để điều chỉnh cách khớp tuyến đường.

Dưới đây là một ví dụ về cách sử dụng Route để định nghĩa một tuyến đường động với tham số "id" cho một bài đăng cụ thể:

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

import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
import PostDetail from './components/PostDetail';

function App() {
  return (
    <div>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
        <Route path="/post/:id" component={PostDetail} />
      </Switch>
    </div>
  );
}
export default App;

Ở đây, chúng ta đã định nghĩa một tuyến đường cho trang chi tiết của một bài đăng, sử dụng tham số "id". Khi người dùng truy cập vào đường dẫn "/post/123", ví dụ, React Router sẽ gọi component "PostDetail" và chuyển tham số "123" dưới dạng prop vào component đó. Bằng cách sử dụng tham số động như vậy, bạn có thể tạo các tuyến đường linh hoạt hơn để đáp ứng nhu cầu của ứng dụng của mình.

3. Switch trong react router js:

Switch là một component trong React Router giúp xác định và kết hợp các Route component bên trong nó. Khi một người dùng truy cập vào một URL nào đó, Switch sẽ duyệt qua các Route component bên trong và chọn ra Route đầu tiên khớp với URL đó để render component tương ứng.

Ví dụ, nếu chúng ta có ba Route như sau:

<Route path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />

Khi người dùng truy cập vào đường dẫn "/about", React Router sẽ kích hoạt Route đầu tiên khớp được với URL này, nghĩa là Route với path "/". Điều này sẽ dẫn đến việc cả ba component Home, About và Contact đều được render ra trên màn hình.

Để giải quyết vấn đề này, chúng ta có thể sử dụng Switch component để chỉ hiển thị một Route duy nhất bên trong đó. Switch sẽ duyệt qua các Route component bên trong nó theo thứ tự và chỉ render component của Route đầu tiên khớp với URL hiện tại.

Ví dụ:

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

import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

function App() {
  return (
    <div>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </div>
  );
}
export default App;

Trong ví dụ trên, chỉ có một Route duy nhất được render bởi Switch, tùy thuộc vào đường dẫn URL hiện tại. Nếu người dùng truy cập vào đường dẫn "/about", chỉ component About sẽ được render. Tương tự, nếu người dùng truy cập vào đường dẫn "/contact", chỉ component Contact sẽ được render.

4. Link trong react router js:

Link là một component trong React Router giúp tạo ra một liên kết đến một tuyến đường (`route`) khác. Khi người dùng click vào một Link, React Router sẽ điều hướng đến tuyến đường tương ứng với Link đó, thay vì gửi yêu cầu tải lại trang web như khi sử dụng thẻ <a> thông thường.

Ví dụ, để tạo một Link đến tuyến đường "/about", chúng ta có thể sử dụng component Link như sau:

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

function Header() {
  return (
    <header>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>
    </header>
  );
}
export default Header;

Trong ví dụ trên, chúng ta sử dụng component Link để tạo ra ba liên kết tới các tuyến đường khác nhau. Để chỉ định tuyến đường mà Link sẽ đến, chúng ta sử dụng thuộc tính to và truyền vào đường dẫn URL tương ứng.

Khi người dùng click vào một Link, React Router sẽ điều hướng đến tuyến đường tương ứng mà không gửi yêu cầu tải lại trang web. Thay vào đó, React Router sẽ tải và hiển thị component của tuyến đường đó lên màn hình.

5. NavLink trong react router:

NavLink là một component tương tự như Link trong React Router, nhưng cung cấp thêm một số tính năng khác nhau.

Một trong những tính năng đáng chú ý của NavLink là có thể cấu hình để tự động thêm lớp active khi Link được click và đang hiển thị trên màn hình. Điều này giúp người dùng có thể nhận ra được Link nào đang được chọn và đang hiển thị trên trang.

Để sử dụng NavLink, chúng ta cần import nó từ `react-router-dom` và sử dụng như sau:

import React from "react";
import { NavLink } from "react-router-dom";

function Header() {
  return (
    <header>
      <nav>
        <ul>
          <li>
            <NavLink exact to="/">
              Home
            </NavLink>
          </li>
          <li>
            <NavLink to="/about">About</NavLink>
          </li>
          <li>
            <NavLink to="/contact">Contact</NavLink>
          </li>
        </ul>
      </nav>
    </header>
  );
}
export default Header;

Trong ví dụ trên, chúng ta sử dụng NavLink để tạo ra ba liên kết tới các tuyến đường khác nhau. Thuộc tính to của NavLink được sử dụng để chỉ định tuyến đường mà NavLink sẽ đến.

Ngoài ra, chúng ta cũng có thể sử dụng thuộc tính exact để chỉ định rằng NavLink chỉ được coi là "active" nếu đường dẫn trên thanh địa chỉ trùng khớp chính xác với to của NavLink. Nếu không sử dụng thuộc tính `exact`, NavLink sẽ được coi là "active" nếu đường dẫn trên thanh địa chỉ bắt đầu bằng to của NavLink.

6. Redirect trong react router :

Trong React Router, component Redirect được sử dụng để chuyển hướng người dùng đến một trang khác.

Để sử dụng Redirect, chúng ta cần import nó từ `react-router-dom` và sử dụng như sau:

import React from "react";
import { Redirect } from "react-router-dom";

function LoginPage(props) {
  const { isLoggedIn } = props;
  if (isLoggedIn) {
    return <Redirect to="/" />;
  }
  return (
    <div>
      <h1>Login Page</h1>
      <p>Please log in to continue</p>
    </div>
  );
}
export default LoginPage;

Trong ví dụ trên, chúng ta sử dụng Redirect để chuyển hướng người dùng đến trang chủ (`/`) nếu người dùng đã đăng nhập. Nếu chưa đăng nhập, LoginPage sẽ hiển thị thông báo yêu cầu người dùng đăng nhập.

Chúng ta cũng có thể sử dụng Redirect để chuyển hướng người dùng đến một trang khác nếu tuyến đường không tồn tại hoặc người dùng truy cập vào một trang không được phép.

mport React from "react";
import { Route, Redirect } from "react-router-dom";

function PrivateRoute(props) {
  const { isLoggedIn, component: Component, ...rest } = props;
  return (
    <Route
      {...rest}
      render={(props) =>
        isLoggedIn ? <Component {...props} /> : <Redirect to="/login" />
      }
    />
  );
}
export default PrivateRoute;

Trong ví dụ trên, chúng ta định nghĩa một PrivateRoute component để bảo vệ một tuyến đường khỏi việc truy cập trái phép. Nếu người dùng chưa đăng nhập, PrivateRoute sẽ chuyển hướng người dùng đến trang đăng nhập (`/login`). Nếu đã đăng nhập, PrivateRoute sẽ cho phép người dùng truy cập vào tuyến đường được bảo vệ.

Với Redirect, chúng ta có thể thực hiện chuyển hướng người dùng đến các trang khác nhau một cách dễ dàng và hiệu quả trong ứng dụng React của mình.

7. withRouter trong react router js:

Trong React Router, component `withRouter` là một higher-order component (HOC) được sử dụng để đóng gói một component và cung cấp các thuộc tính liên quan đến routing như `match`, `location` và `history`.

Khi một component được đóng gói bởi `withRouter`, các thuộc tính liên quan đến routing được truyền vào component thông qua props.

Ví Dụ:

import React from "react";
import { withRouter } from "react-router-dom";

function MyComponent(props) {
  console.log(props.match);
  console.log(props.location);
  console.log(props.history);
 return (
    <div>
      <h1>My Component</h1>
      <p>Match: {props.match.url}</p>
      <p>Location: {props.location.pathname}</p>
      <p>History Length: {props.history.length}</p>
    </div>
  );
}
export default withRouter(MyComponent);

Trong ví dụ trên, chúng ta sử dụng `withRouter` để đóng gói component `MyComponent`. Khi component này được sử dụng, nó sẽ có các thuộc tính `match`, `location` và `history` được truyền vào thông qua props.

`match` chứa thông tin về tuyến đường hiện tại và các tham số động (nếu có). `location` chứa thông tin về địa chỉ URL hiện tại và `history` chứa thông tin về lịch sử duyệt web, bao gồm các hoạt động như điều hướng, quay lại và tiến lên.

`withRouter` là một công cụ hữu ích để truy cập các thuộc tính liên quan đến routing trong một component và thực hiện các chức năng liên quan đến điều hướng trong ứng dụng của bạn.

8. Route Matching trong react router js :

Trong React Router, Route Matching là quá trình so khớp đường dẫn URL hiện tại với các tuyến đường (routes) đã được định nghĩa để xác định component sẽ được hiển thị.

React Router cung cấp nhiều cách để định nghĩa các tuyến đường, nhưng đối với mỗi tuyến đường, chúng ta phải chỉ định một pattern để so khớp với đường dẫn URL hiện tại.

Các pattern khác nhau có thể được sử dụng để so khớp với các phần khác nhau của đường dẫn URL.

Ví Dụ:

`path`: đường dẫn cần khớp với địa chỉ URL, bao gồm các tham số động. Ví dụ: `/users/:userId`.

`Exact`: chỉ định rằng tuyến đường chỉ khớp với địa chỉ URL chính xác. Ví dụ: `/about`.

`strict`: chỉ định rằng tuyến đường chỉ khớp với địa chỉ URL chính xác và có thể có dấu gạch chéo cuối cùng hoặc không. Ví dụ: `/about/`.

`sensitive`: chỉ định rằng tuyến đường phải khớp chính xác với các chữ cái viết hoa / viết thường trong địa chỉ URL.

Ví dụ, đoạn mã sau định nghĩa một tuyến đường sử dụng các pattern khác nhau để so khớp với địa chỉ URL hiện tại:

import React from "react";
import { Route } from "react-router-dom";

function MyComponent() {
  return <h1>My Component</h1>;
}
function App() {
  return (
    <div>
      <Route path="/" exact component={MyComponent} />
      <Route path="/users/:userId" component={MyComponent} />
      <Route path="/about/" strict component={MyComponent} />
      <Route path="/login" sensitive component={MyComponent} />
    </div>
  );
}
export default App;

Trong ví dụ trên, chúng ta định nghĩa các tuyến đường khác nhau với các pattern khác nhau để so khớp với địa chỉ URL hiện tại. Ví dụ, tuyến đường đầu tiên chỉ khớp với địa chỉ URL chính xác '/', trong khi tuyến đường thứ hai khớp với bất kỳ địa chỉ URL có định dạng '/users/:userId'. Các pattern còn lại được sử dụng để chỉ định các yêu cầu khác cho việc khớp tuyến đường.

9. Programmatic Navigation tron react router js:

Programmatic Navigation trong ReactJS được sử dụng để điều hướng trang web của bạn tới các trang khác trong ứng dụng của bạn mà không cần phải sử dụng trình duyệt. Điều này cho phép bạn điều khiển quá trình điều hướng của ứng dụng của mình từ code.

React cung cấp cho chúng ta một số cách để thực hiện programmatic navigation. Dưới đây là một số cách thường được sử dụng:

Sử dụng react-router-dom

`react-router-dom` là một thư viện điều hướng phổ biến được sử dụng trong các ứng dụng React. Để sử dụng programmatic navigation với `react-router-dom`, chúng ta có thể sử dụng component `history` của `react-router-dom`. Component này cung cấp cho chúng ta các phương thức để thực hiện điều hướng trong ứng dụng của mình.

Dưới đây là một ví dụ:

import { useHistory } from "react-router-dom";

function MyComponent() {
  const history = useHistory();
  function handleClick() {
    history.push("/new-route");
  }
  return <button onClick={handleClick}>Go to new route</button>;
}

Ở đây, chúng ta sử dụng hook `useHistory` để lấy component `history`. Sau đó, chúng ta sử dụng phương thức `push` để chuyển hướng tới địa chỉ `/new-route`.

Sử dụng window.location.href

Chúng ta có thể sử dụng thuộc tính `window.location.href` của JavaScript để thực hiện programmatic navigation. Khi sử dụng cách này, chúng ta đơn giản chỉ cần gán giá trị mới cho thuộc tính `window.location.href` để chuyển hướng tới một trang khác.

Dưới đây là một ví dụ:

function MyComponent() {
  function handleClick() {
    window.location.href = "/new-route";
  }

  return <button onClick={handleClick}>Go to new route</button>;
}

Ở đây, chúng ta sử dụng phương thức `handleClick` để gán giá trị mới cho thuộc tính `window.location.href`. Khi người dùng nhấn vào nút này, trình duyệt sẽ chuyển hướng tới địa chỉ `/new-route`.

Sử dụng React Router history object

Chúng ta có thể sử dụng đối tượng lịch sử của React Router để điều hướng trang. Đối tượng lịch sử cung cấp cho chúng ta một số phương thức để thực hiện điều hướng.

Ví dụ:

import { createBrowserHistory } from "history";

const history = createBrowserHistory();
function MyComponent() {
  function handleClick() {
    history.push("/new-route");
  }
  return <button onClick={handleClick}>Go to new route</button>;
}

Ở đây, chúng ta sử dụng `createBrowserHistory` để tạo đối tượng lịch sử của trình duyệt. Sau đó, chúng ta sử dụng phương thức `push` để chuyển hướng tới địa chỉ `/new-route` khi người dùng nhấn vào nút.

Các phương thức điều hướng khác của đối tượng lịch sử bao gồm `goBack`, `goForward` và `replace`. Chúng ta có thể sử dụng chúng để điều hướng tới trang trước đó, trang tiếp theo hoặc thay thế địa chỉ hiện tại bằng địa chỉ mới.

III. Kết Luận:

React Router là một phần quan trọng trong việc phát triển các ứng dụng React, cho phép quản lý và điều hướng đường dẫn một cách dễ dàng. Bằng cách sử dụng các thành phần như Route, Link và Redirect, các nhà phát triển có thể xây dựng các ứng dụng web động và phức tạp với các tính năng chuyển hướng và bảo mật. Nếu bạn đang tìm kiếm một thư viện để quản lý đường dẫn trong ứng dụng React của mình, hãy xem xét sử dụng React Router.