Hướng dẫn dùng react-location JavaScript

Giới thiệu

Trong React, bộ định tuyến (router) giúp tạo và điều hướng giữa các URL khác nhau tạo nên ứng dụng web của bạn. Chúng cho phép người dùng của bạn di chuyển giữa các component của ứng dụng trong khi vẫn duy trì trạng thái người dùng và có thể cung cấp các URL duy nhất cho các component này để giúp chúng dễ chia sẻ hơn. Với router, bạn có thể cải thiện trải nghiệm người dùng của ứng dụng bằng cách đơn giản hóa việc điều hướng trang web.

React Router là một trong những framework định tuyến phổ biến nhất cho React. Thư viện được thiết kế với các thành phần trực quan để cho phép bạn xây dựng một hệ thống định tuyến khai báo cho ứng dụng của mình. Điều này có nghĩa là bạn có thể khai báo chính xác component của bạn với một route nhất định. Với việc khai báo định tuyến, bạn có thể tạo các route trực quan mà người dùng có thể đọc được, giúp quản lý kiến ​​trúc ứng dụng của bạn dễ dàng hơn.

Trong bài hướng dẫn này, bạn sẽ cài đặt và cấu hình Bộ định tuyến React, xây dựng một tập hợp các route và kết nối với chúng bằng cách sử dụng compnent . Bạn cũng sẽ xây dựng các route động thu thập dữ liệu từ một URL mà bạn có thể truy cập trong component của mình. Cuối cùng, bạn sẽ sử dụng Hook để truy cập dữ liệu và các thông tin định tuyến khác và tạo các route lồng nhau nằm bên trong các component được các route cha hiển thị.

Đến cuối hướng dẫn này, bạn sẽ có thể thêm các route vào bất kỳ dự án React nào và đọc thông tin từ các route của mình để bạn có thể tạo các component linh hoạt phản hồi dữ liệu URL.

Bước 1 - Tạo một dự án trống

Trong bước này, bạn sẽ tạo một dự án mới bằng Create React App. Sau đó, bạn sẽ xóa dự án mẫu và các tệp liên quan được cài đặt khi bạn khởi động dự án. Cuối cùng, bạn sẽ tạo một cấu trúc tệp đơn giản để tổ chức các component của mình. Điều này sẽ cung cấp cho bạn một cơ sở vững chắc để xây dựng ứng dụng mẫu của hướng dẫn này để tạo style trong bước tiếp theo.

Để bắt đầu, hãy thực hiện một dự án mới. Bạn mở terminal và chạy tập lệnh sau để cài đặt một dự án mới bằng cách sử dụng create-react-app:

npx create-react-app router-tutorial

Sau khi dự án kết thúc, hãy thay đổi vào thư mục:

cd router-tutorial​

Khởi động dự án với lệnh:

npm start

Bạn sẽ nhận được một máy chủ cục bộ đang chạy. Nếu dự án không mở trong cửa sổ trình duyệt, bạn có thể mở nó bằng http://localhost:3000/. Nếu bạn đang chạy điều này từ một máy chủ từ xa, địa chỉ sẽ là .http://your_domain:3000

Trình duyệt của bạn sẽ tải với một ứng dụng React đơn giản được bao gồm như một phần của Create React App:

Bạn sẽ xây dựng một tập hợp các component tùy chỉnh hoàn toàn mới, vì vậy bạn sẽ cần bắt đầu bằng cách xóa một số mã soạn sẵn để bạn có thể có một dự án trống.

Để bắt đầu, hãy mở component src/App.js. Đây là component gốc được đưa vào trang. Tất cả các component sẽ bắt đầu từ đây. Bạn sửa lại file để trong đó chỉ còn chứa như sau:

import './App.css';

function App() {
  return <></>;
}

export default App;

Mở một terminal khác và thực hiện thao tác xóa file logo.svg:

rm src/logo.svg

Tạo thư mục components:

mkdir src/components

Tạo thư mục App:

mkdir src/components/App

Di chuyển các file App.* vào thư mục App:

mv src/App.* src/components/App

Mở file index.js và chỉnh sửa:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App/App';
import * as serviceWorker from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Lưu file lại và quay lại trang web ta được một trang web trống.

Bây giờ bạn đã hoàn thành dự án Tạo ứng dụng React mẫu, hãy tạo một cấu trúc tệp đơn giản. Điều này sẽ giúp bạn giữ cho các component của bạn cô lập và độc lập.

Tạo một thư mục được gọi components trong thư mục src, components sẽ là nơi chứa tất cả các component tùy chỉnh của bạn.

Bước 2 - Cài đặt Bộ định tuyến React

Trong bước này, bạn sẽ cài đặt React Router vào dự án cơ sở của mình. Trong dự án này, bạn sẽ tạo một trang web nhỏ về các loài động vật có vú ở biển. Mỗi động vật có vú sẽ cần một component riêng biệt mà bạn sẽ kết xuất với bộ định tuyến. Sau khi cài đặt thư viện, bạn sẽ tạo một loạt các component cho mỗi động vật có vú. Đến cuối bước này, bạn sẽ có nền tảng để hiển thị các loài động vật có vú khác nhau dựa trên route.

Để bắt đầu, hãy cài đặt gói React Router. Có hai phiên bản khác nhau: phiên bản web và phiên bản gốc để sử dụng với React Native. Bạn sẽ cài đặt phiên bản web.

Trong thiết bị đầu cuối của bạn, sử dụng npm để cài đặt gói:

npm install react-router-dom

Gói sẽ được cài đặt và bạn sẽ nhận được một thông báo dạng như thông báo dưới khi quá trình cài đặt hoàn tất:

added 15 packages, and audited 2002 packages in 14s

151 packages are looking for funding
  run `npm fund` for details

10 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Bây giờ bạn đã cài đặt gói. Trong phần còn lại của bước này, bạn sẽ tạo một loạt các component mà mỗi component sẽ có một route duy nhất.

Để bắt đầu, hãy tạo một thư mục cho ba loài động vật có vú khác nhau: manatee (lợn biển), narwhal (kỳ lân biển) và và whale (cá voi). Chạy các lệnh sau:

mkdir src/components/Manatee
mkdir src/components/Narwhal
mkdir src/components/Whale

Tiếp theo, tạo một component cho mỗi con vật. Trước tiên ta thêm một thẻ 

 cho mỗi động vật có vú. Trong một ứng dụng đầy đủ, các component con có thể phức tạp. Chúng thậm chí còn có thể import và render các component con của riêng chúng. Đối với hướng dẫn này, bạn sẽ chỉ hiển thị thẻ 

.

Bắt đầu với component manatee. Tạo và mở file Manatee.js ra, sau đó thêm một component cơ bản:

export default function Manatee() {
  return <h2>Manatee</h2>;
}

Lưu file lại.

Tiếp theo, tạo một component cho narwhal. Thêm component cơ bản tương tự như trên, thay đổi nội dung trong 

 thành Narwhal:

export default function Narwhal() {
  return <h2>Narwhal</h2>;
}

Lưu file lại.

Cuối cùng, tạo một component cho whale:

export default function Whale() {
  return <h2>Whale</h2>;
}

Lưu file lại.

Trong bước tiếp theo, bạn sẽ bắt đầu kết nối các route; bây giờ, hãy hiển thị component cơ bản trong ứng dụng của bạn.

Mở App.js ra, thêm một thẻ 

 trong đó chứa tên của trang web (Marine Mammals) bên trong một thẻ 

 với className là wrapper. Đây sẽ là một mẫu (template) vì thẻ

 và 

 sẽ hiển thị trên mọi trang. Trong các ứng dụng đầy đủ, bạn có thể thêm thanh điều hướng hoặc header mà bạn muốn trên mọi trang.

Thêm các dòng được đánh dấu sau vào file:

import './App.css';
function App() {
  return (
    <div className="wrapper">
      <h2>Marine Mammals</h2>
    </div>
  );
}

export default App;

Tiếp theo, import Manatee và hiển thị bên trong 

. Điều này sẽ hoạt động như một trình giữ chỗ cho đến khi bạn thêm các route khác:

import React from 'react';
import './App.css';

import Manatee from '../Manatee/Manatee';

function App() {
  return (
    <div className="wrapper">
      <h2>Marine Mammals</h2>
      <Manatee />
    </div>
  );
}

export default App;

Lưu file lại.

Bây giờ bạn đã có tất cả các component, hãy thêm một số phần đệm (padding) để cung cấp cho ứng dụng một ít không gian.

Mở App.css ra, sau đó thay thế nội dung với đoạn mã sau đây (bổ sung thêm một padding 20px cho class .wrapper):

.wrapper {
    padding: 20px;
}

Lưu file lại và quay lại trang web, bạn sẽ thấy các thành phần cơ bản của bạn:

Bây giờ bạn có một component gốc cơ bản mà bạn sẽ sử dụng để hiển thị các component khác. Nếu bạn không có bộ định tuyến, bạn có thể hiển thị có điều kiện các component bằng Hook useState. Nhưng điều này sẽ không mang lại trải nghiệm tuyệt vời cho người dùng của bạn. Bất cứ khi nào người dùng làm mới trang, lựa chọn của người dùng sẽ biến mất. Hơn nữa, họ sẽ không thể đánh dấu trang hoặc chia sẻ các state cụ thể của ứng dụng. Một bộ định tuyến sẽ giải quyết tất cả những vấn đề này. Bộ định tuyến sẽ duy trì trạng thái người dùng và sẽ cung cấp cho người dùng một URL rõ ràng để họ có thể lưu hoặc gửi cho người khác.

Như vậy ở bước này, bạn đã cài đặt React Router và tạo các component cơ bản. Các component sẽ là các trang riêng lẻ mà bạn sẽ hiển thị theo route. Trong bước tiếp theo, bạn sẽ thêm các route và sử dụng component  để tạo các siêu liên kết hiệu quả.

Bước 3 - Thêm route

Trong bước này, bạn sẽ tạo một bộ định tuyến cơ sở với các route riêng cho từng trang. Bạn sẽ sắp xếp các route của mình để đảm bảo rằng các component được hiển thị chính xác và bạn sẽ sử dụng component  đó để thêm các siêu liên kết vào dự án của mình mà sẽ không kích hoạt làm mới trang.

Đến cuối bước này, bạn sẽ có một ứng dụng có điều hướng sẽ hiển thị các component của bạn theo route.

React Router là một framework định tuyến khai báo. Điều đó có nghĩa là bạn sẽ cấu hình các route sử dụng các component React tiêu chuẩn. Có một số lợi thế cho cách tiếp cận này. Đầu tiên, nó tuân theo bản chất giải mã tiêu chuẩn của mã React. Bạn không cần phải thêm nhiều mã trong các phương thức componentDidMount hoặc bên trong một Hook useEffect; các route của bạn là các component. Thứ hai, bạn có thể đặt các route bên trong một component một cách trực quan với các component khác đóng vai trò như một khuôn mẫu (template). Khi bạn đọc mã, bạn sẽ tìm thấy chính xác vị trí các component động sẽ phù hợp với các chế độ xem toàn cục như điều hướng hoặc chân trang.

Để bắt đầu thêm các route, hãy mở App.js ra, thẻ 

 sẽ đóng vai trò là tiêu đề trang global. Vì bạn muốn nó xuất hiện trên mọi trang, hãy định cấu hình bộ định tuyến sau thẻ này.

Import BrowserRouter, Route và Switch từ react-router-dom. BrowserRouter sẽ là cấu hình cơ sở. Switch sẽ bao ngoài các route động và component Route sẽ định cấu hình các route cụ thể và bọc component sẽ hiển thị:

import { BrowserRouter, Route, Switch } from 'react-router-dom';
import './App.css';

import Manatee from '../Manatee/Manatee';

function App() {
  return (
    <div className="wrapper">
      <h2>Marine Mammals</h2>
      <Manatee />
    </div>
  );
}

export default App;

Thêm component BrowserRouter để tạo một bộ định tuyến cơ sở. Mọi thứ bên ngoài component này sẽ hiển thị trên mọi trang, vì vậy hãy đặt nó sau thẻ 

. Ngoài ra, nếu bạn có toàn bộ trang web context mà bạn muốn sử dụng hoặc một số store khác như Redux, hãy đặt các component đó bên ngoài bộ định tuyến. Điều này sẽ làm cho chúng có sẵn cho tất cả các component trên bất kỳ route nào:

import { BrowserRouter, Route, Switch } from 'react-router-dom';
import './App.css';

import Manatee from '../Manatee/Manatee';

function App() {
  return (
    <div className="wrapper">
      <h2>Marine Mammals</h2>
      <BrowserRouter>
        <Manatee />
      </BrowserRouter>
    </div>
  );
}

export default App;

Tiếp theo, thêm component Switch bên trong BrowserRouter. Component này sẽ kích hoạt đúng route, giống như câu lệnh switch JavaScript. Bên trong Switch, thêm một component Route cho mỗi route. Trong trường hợp này, bạn sẽ muốn các route sau: /manataee, /narwhal, và /whale. Component Route sẽ nhận path làm tham số và bao quanh một component con. Component con sẽ hiển thị khi route đang hoạt động.

Tạo một route cho đường dẫn / và hiển thị component Manatee:

import { BrowserRouter, Route, Switch } from 'react-router-dom';
import './App.css';

import Manatee from '../Manatee/Manatee';

function App() {
  return (
    <div className="wrapper">
      <h2>Marine Mammals</h2>
      <BrowserRouter>
        <Switch>
          <Route path="/">
            <Manatee />
          </Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

Lưu file lại và quay lại trang web, bạn sẽ tìm thấy thông tin cho component Manatee:

Nếu bạn thử một route khác chẳng hạn như http://localhost:3000/whale, bạn sẽ vẫn nhận kết quả là component Manatee:

Component Switch sẽ hiển thị route đầu tiên phù hợp với mẫu đó. Bất kỳ route nào cũng sẽ phù hợp với /, vì vậy nó sẽ hiển thị trên mọi trang. Điều đó cũng có nghĩa là thứ tự là quan trọng. Vì bộ định tuyến sẽ thoát ngay khi tìm thấy một điểm trùng khớp, nên luôn đặt một route cụ thể hơn ở trước một route ít cụ thể hơn. Nói cách khác, /whale sẽ ở trước / và /whale/beluga sẽ ở trước /whale.

Nếu bạn muốn route chỉ khớp với route như đã viết chứ không phải bất kỳ route con nào, bạn có thể thêm prop exact. Ví dụ,  sẽ khớp với /manatee, nhưng không khớp /manatee/african.

Cập nhật route cho component Manatee là /manatee, sau đó import các component còn lại và tạo một route cho từng component:

import { BrowserRouter, Route, Switch } from 'react-router-dom';
import './App.css';

import Manatee from '../Manatee/Manatee';
import Narwhal from '../Narwhal/Narwhal';
import Whale from '../Whale/Whale';

function App() {
  return (
    <div className="wrapper">
      <h2>Marine Mammals</h2>
      <BrowserRouter>
        <Switch>
          <Route path="/manatee">
            <Manatee />
          </Route>
          <Route path="/narwhal">
            <Narwhal />
          </Route>
          <Route path="/whale">
            <Whale />
          </Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

Lưu file lại và quay lại trang web, nếu bạn truy cập http://localhost:3000/, thì chỉ thẻ 

 sẽ hiển thị, vì không có route nào phù hợp với bất kỳ component Route nào:

Nếu bạn truy cập http://localhost:3000/whale, bạn sẽ tìm thấy component Whale:

Bây giờ bạn đã có một số component, hãy tạo điều hướng để người dùng di chuyển giữa các trang.

Sử dụng phần tử