ReactJS: Cách so sánh React Router và Reach Router

Giới thiệu

Các giả của Reach Router là Ryan Florence. Nếu bạn nhận ra tên của anh ấy, đó là bởi vì anh ấy là đồng tác giả ban đầu của React Router, hiện là thư viện định tuyến phổ biến nhất.

Cả hai thư viện dường như có mục đích giống nhau để cung cấp một lớp định tuyến cho web. Tuy nhiên, Reach Router đang thực hiện một cách tiếp cận mới cho giải pháp và nó cũng đi kèm với khả năng truy cập (a11y) được tích hợp và hoạt động ngay.

Trong bài viết này, bạn sẽ so sánh React Router với Reach Router để hiểu rõ hơn về những gì mà mỗi thư viện hỗ trợ và cung cấp.

Điều kiện tiên quyết

Để làm theo hướng dẫn này, bạn sẽ cần:

• Một số thông tin quen thuộc với React. Bạn có thể đọc loạt bài Cách viết mã trong React.js của chúng tôi.
• Làm quen với các quy ước của React Router. Bạn có thể đọc Tổng quan về Bộ định tuyến React của chúng tôi.

So sánh thiết lập

Reach Router rất giống với React Router và sử dụng các không gian tên tương tự như <Router>, <Link>, v.v., nhưng có một số điểm khác biệt đáng chú ý. Hãy xem xét một thiết lập cơ bản cho cả hai react-router và reach-router.

Đầu tiên, thiết lập bằng React Router:

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

const App = () => {
  return (
    <Router>
      <div>
        <h1>Global Party Supplies, Inc</h1>                          //  PATHS
        <Route component={Home}       path="/"            exact/>    //  "/"
        <Route component={About}      path="/about"/>                //  "/about"
        <Route component={Support}    path="/support"/>              //  "/support"
        <Route component={Dashboard}  path="/dashboard"/>            //  "/dashboard"
        <Route component={Invoices}   path="/dashboard/invoices"/>   //  "/dashboard/invoices"
        <Route component={Team}       path="/dashboard/team"/>       //  "/dashboard/team"
        <Route component={Report}     path="/dashboard/:reportId"/>  //  "/dashboard/:reportId"
      </div>
    </Router>
  );
}

React Router có component <Route> riêng của nó có hai prop: component và path.

Đây là cách thiết lập tương tự bằng cách sử dụng Reach Router:

Reach Routerimport React from "react";
import { Router } from "@reach/router";

const App = () => {
  return (
    <div>
      <h1>Global Party Supplies, Inc</h1>
      <Router>                           //  PATHS
        <Home path="/"/>                 //  "/"
        <About path="about"/>            //  "/about"
        <Support path="support"/>        //  "/support"
        <Dashboard path="dashboard">     //  "/dashboard"
          <Report path=":reportId"/>     //  "/dashboard/:reportId"
          <Invoices path="invoices"/>    //  "/dashboard/invoices"
          <Team path="team"/>            //  "/dashboard/team"
        </Dashboard>
      </Router>
    </div>
  );
}

Ấn tượng đầu tiên là nó trông thực sự sạch sẽ. Reach Router không có một component <Route> nào. Bạn chỉ cần sử dụng chính component đó (ví dụ <Dashboard>). Việc sử dụng JSX lồng nhau cho các đường dẫn con ( /dashboard/team) tự phân biệt với React Router.

Nhưng khoan đã… có điều gì đó kỳ lạ ở đây. Thoạt nhìn, bạn có thể nghĩ rằng route <Report> sẽ chặn được /dashboard/invoices và /dashboard/team, nhưng thực tế thì không!

Reach Router sử dụng hệ thống điểm để xếp hạng các định nghĩa route của bạn bằng cách xem xét giá trị path. Trong khi hai đường dẫn dường như va chạm, params (:reportId) và ký tự đại diện (*) có mức độ ưu tiên thấp, trong khi các đường dẫn rõ ràng (invoices và teams) có mức độ ưu tiên cao hơn. Điều này có nghĩa là điều hướng đến /dashboard/invoices thực sự hoạt động và /dashboard/example sẽ đi đến <Report>.

So sánh Params và Props

Bây giờ chúng ta đã khám phá thiết lập cơ bản, hãy khám phá cách bạn sẽ chuyển dữ liệu đến các route.

Đầu tiên là reportId và salesData với React Router:

React Router<Route
  path="/dashboard/:reportId"
  render={(props) => {
    return <Report {...props} salesData={true} />
  }}
/>

const Report = ({ props, match }) => {
  return (
    <h1>
      {match.params.reportId}  // "match" là từ react-router
      and
      {props.salesData}
    </h1>
  )
}

Có nhiều thứ liên quan đến React Router, nhưng đây là giá bình thường nếu bạn đã sử dụng nó trong bất kỳ khoảng thời gian nào.

Đây là ví dụ tương tự với Reach Router:

Reach Router<Report
  path="dashboard/:reportId"  // Các route static cũng làm việc
  salesData={this.state.salesData}
/>

const Report = (props) => {
  return (
    <h1>
      {props.reportId}
      and
      {props.salesData}
    </h1>
  )
}

Lưu ý cách reportId không yêu cầu match truy cập các tham số URL.

Tiếp theo, ta hãy xem cách thức <Link> hoạt động trong cả hai thư viện.

So sánh liên kết

Cả Reach Router và React Router đều xuất một component <Link>, nhưng có một số khác biệt. Hãy xem xét một component <Dashboard> có một số trang con.

Đầu tiên, với React Router:

React Routerimport { Link } from "react-router-dom";

const Dashboard = ({ match, history }) => {
  return (
    <div>
      <div>
        <Link to={`${match.url}/invoices`}>Invoices</Link>
        <Link to={`${match.url}/team`}>Team</Link>
      </div>

      <!-- content -->

      <div>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/support">Support</Link>
        <a onClick={history.goBack}>Go Back</a>
      </div>
    </div>
  );
}

Với React Router, bạn phải cụ thể với <Link> thường có nghĩa là bạn sẽ phải sử dụng match.url khi bạn có các đường dẫn con ngoài đường dẫn con gốc (ví dụ /host/path1/path2). Ngoài ra, lưu ý rằng bạn phải lập trình goBack vì không có tiện ích để điều hướng tương đối.

Đây là ví dụ tương tự với Reach Router:

Reach Routerimport { Link } from "@reach/router";

const Dashboard = () => {
  return (
    <div>
      <div>
        <Link to="invoices">Invoices</Link>
        <Link to="team">Team</Link>
      </div>

      <!-- content -->

      <div>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/support">Support</Link>
        <Link to="../">Go Back</Link>
      </div>
    </div>
  )
}

Reach Router hỗ trợ các liên kết tương đối! Nó cũng hỗ trợ đầy đủ điều hướng thư mục Unix giống như các thẻ <a>.

Phần kết luận

Trong bài viết này, bạn đã so sánh React Router với Reach Router để hiểu rõ hơn về những gì mà mỗi thư viện hỗ trợ và cung cấp.

Dựa trên những so sánh này, Reach Router là một lựa chọn thay thế hấp dẫn cho React Router. Nhìn chung, nó thanh lịch hơn trong việc truyền tải thông tin khi đọc và viết mã. Điều này không có gì đáng ngạc nhiên vì Ryan Florence là đồng tác giả của cuốn sách react-router và hầu hết những hiểu biết khó khăn chỉ có thể có được nhờ thời gian và kinh nghiệm.

Hãy dùng thử Reach Router! Bản phát hành v1.0 đầu tiên là vào tháng 5 năm 2018.