React Router Cheatsheet và mọi thứ bạn cần biết (Phần 1)

Tác giả: Reed Barger

Nếu bạn đang xây dựng các ứng dụng React cho web, bạn sẽ cần sử dụng một router chuyên dụng để hiển thị các trang và điều hướng người dùng của bạn xung quanh chúng.

Đó là lý do tại sao hôm nay chúng ta sẽ xem xét bộ React applications – React Router.

Cài đặt React Router

Bước đầu tiên để sử dụng React Router là cài đặt package thích hợp. Về mặt kỹ thuật, chúng là ba gói khác nhau: React Router, React Router DOM và React Router Native.

Sự khác biệt chính giữa chúng nằm ở cách sử dụng. React Router DOM dành cho các ứng dụng web và React Router Native dành cho các ứng dụng di động được tạo bằng React Native.

Điều đầu tiên bạn cần làm là cài đặt React Router DOM bằng cách sử dụng npm:

npm install react-router-dom

Setup React Router cơ bản

Sau khi được cài đặt, có thể đưa thành phần đầu tiên vào để sử dụng bộ định tuyến React được gọi là BrowserRouter.

Lưu ý rằng có nhiều loại router react-router-dom cung cấp ngoài BrowserRouter nhưng ở đây sẽ không đi sâu vào phân tích. Nếu chúng ta muốn cung cấp các tuyến trong toàn bộ ứng dụng của mình, nó cần được bao bọc xung quanh toàn bộ cây thành phần của chúng ta. Đó là lý do tại sao bạn thường sẽ thấy nó được bao bọc xung quanh hoặc bên trong thành phần ứng dụng chính:

import { BrowserRouter as Router } from 'react-router-dom';

export default function App() {
  return (
    <Router>
      {/* routes go here, as children */}
    </Router>
  );
}

Đây là chức năng chính của BrowserRouter: để có thể khai báo các tuyến đường riêng lẻ trong ứng dụng.

Tuyển dụng React lương cao không yêu cầu KN

Route Component

Bắt đầu bằng khai báo các router trong Router component là các tuyến con. Bạn có thể khai báo bao nhiêu routes tùy thích và cần cung cấp ít nhất hai props cho mỗi route path và component (hoặc render):

import { BrowserRouter as Router, Route } from 'react-router-dom';

export default function App() {
  return (
    <Router>
      <Route path="/about" component={About} />
    </Router>
  );
}

function About() {
  return <>about</>   
}

Prop path hỗ trợ chỉ định đường dẫn của ứng dụng mà một route nhất định được đặt.

Các props render hoặc component được sử dụng để hiển thị một thành phần cụ thể cho đường dẫn của chúng ta.

Các props component chỉ có thể nhận tham chiếu đến một thành phần nhất định, trong khi render thường được sử dụng nhiều hơn để áp dụng một số logic có điều kiện để hiển thị một thành phần này hay thành phần khác. Để kết xuất, bạn có thể sử dụng tham chiếu đến một thành phần hoặc sử dụng một hàm:

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

export default function App() {
  return (
    <Router>
      <Route path="/" render={() => <Home />} />
      <Route path="/about" component={About} />
    </Router>
  );
}

function Home() {
  return <>home</>;
}

function About() {
  return <>about</>;
}

Cần lưu ý rằng bạn có thể bỏ prop render hoặc component hoàn toàn và sử dụng component mà bạn muốn liên kết với một route nhất định khi là route con:

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

export default function App() {
  return (
    <Router>
      <Route path="/about">
        <About />
      </Route>
    </Router>
  );
}

Cuối cùng, nếu muốn một thành phần (chẳng hạn như thanh điều hướng) hiển thị trên mọi trang, hãy đặt nó nằm trong trình duyệt của router, nhưng ở trên (hoặc bên dưới) các routes đã khai báo:

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

export default function App() {
  return (
    <Router>
      <Navbar />
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

function Navbar() {
  // visible on every page
  return <>navbar</>
}

function Home() {
  return <>home</>;
}

function About() {
  return <>about</>;
}

Chuyển đổi thành phần

Khi bắt đầu thêm multiple routes, bạn sẽ nhận thấy một số vấn đề. Giả sử chúng ta có một route cho trang chủ và trang giới thiệu. Mặc dù chỉ định hai đường dẫn khác nhau, ‘/’ và ‘/ about’, khi truy cập trang giới thiệu, bạn vẫn sẽ thấy cả thành phần home và about.

Có thể khắc phục sự cố này bằng phần mềm hỗ trợ chính xác, trên route chính để đảm bảo rằng router của chúng tôi khớp chính xác với đường dẫn ‘/’ thay vì ‘/ about’:

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

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

Khi nói đến chuyển đổi giữa các routes khác nhau mà router sẽ hiển thị, trên thực tế, có một thành phần chuyên dụng mà bạn nên sử dụng nếu bạn có nhiều routes trong router của mình và đó là việc chuyển đổi thành phần.

Thành phần chuyển đổi nên được bao gồm trong router và có thể đặt tất cả các routes bên trong nó:

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

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

Switch sẽ xem xét tất cả các child routes và hiển thị cái đầu tiên có đường dẫn khớp với URL hiện tại. Thành phần này là những gì bạn muốn sử dụng trong hầu hết các trường hợp cho hầu hết các ứng dụng, vì sẽ có nhiều routes và nhiều plate pages trong ứng dụng của mình nhưng chỉ muốn hiển thị một trang tại một thời điểm.

Nếu vì lý do nào đó bạn muốn nhiều trang được hiển thị cùng một lúc, bạn có thể cân nhắc không sử dụng thành phần chuyển đổi.

Xem thêm Bỏ túi cheatsheet dành cho Python newbie

404 route

Nếu chúng ta cố gắng đi đến một route không tồn tại trong ứng dụng thì sẽ thấy gì? Bạn sẽ không nhìn thấy bất cứ điều gì nếu không có một route tương ứng với điều đó. Làm thế nào để tạo một catch-all route?

Nếu người dùng cố gắng truy cập một trang không có route xác định, bạn cũng có thể tạo một route và sau đó đặt đường dẫn thành dấu hoa thị *:

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

export default function App() {
  return (
    <Router>
      <Navbar />
      <Switch>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="*" component={NotFound} />
      </Switch>
    </Router>
  );
}

function NotFound() {
  return <>You have landed on a page that doesn't exist</>;
}

Điều này sẽ phù hợp với bất kỳ nỗ lực nào để truy cập một trang không tồn tại và có thể kết nối nó với một thành phần không tìm thấy để cho người dùng biết rằng họ đã “đến một trang không tồn tại”.

Phỏng dịch theo bài viết gốc tại freecodecamp.org

Có thể bạn quan tâm:

• React Props Cheatsheet: 10 Patterns mà bạn nên biết (Phần 2)
• React Props Cheatsheet: 10 Patterns mà bạn nên biết (Phần 1)
• Bỏ túi Cheatsheet React cho năm 2020 (kèm ví dụ thực tế)