GALAXY TECH
Chuyên gia Công nghệ
Thứ sáu, 19/04/2019 | 00:00 GMT+7

Trận chiến của các bộ định tuyến: Bộ định tuyến tiếp cận và Bộ định tuyến tiếp cận

Trong bài viết này, hãy tìm hiểu tổng quan về Reach Router cùng với các đoạn mã từ React Router để xem cả hai thư viện xếp chồng lên nhau như thế nào.

Reach Router là tác giả của Ryan Florence. Nếu bạn nhận ra tên của anh ấy, đó là vì anh ấy là đồng tác giả ban đầu của React Router , thư viện định tuyến phổ biến nhất hiện nay với 33,5 nghìn sao trên GitHub. Theo như tôi có thể nói, cả hai thư viện đều có mục đích giống nhau là cung cấp lớp định tuyến cho web… Nhưng điều rõ ràng là Reach Router đang áp dụng 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) và làm việc hiệu quả.

Cài đặt cơ bản

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ố khác biệt đáng chú ý. Hãy xem các cài đặt cơ bản cho cả reach-router react-router .

Đầu tiên, cài đặt bằng cách sử dụng Reach Router:

//////////////////
//Reach-Router////
//////////////////

import 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 của tôi là nó trông thực sự sạch sẽ. 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 tuyến đường <Report> sẽ chặn /dashboard/invoices và /dashboard/team , nhưng thực tế thì không! Bộ định tuyến tiếp cận sử dụng hệ thống điểm để xếp hạng các định nghĩa tuyến đường của bạn bằng cách xem giá trị path . Khi hai đường dẫn dường như xung đột, các tham số ( :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 nghĩa là chuyển đến /dashboard/invoices thực sự hoạt động và /dashboard/foo chuyển tới <Report> .

Bây giờ ta hãy xem xét React Router:

//////////////////
//React-Router////
//////////////////

import 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ó thành phần <Route> của riêng nó, có hai đạo cụ: component và path . Trong khi đó Reach Router không có thành phần <Route> … Bạn chỉ cần sử dụng chính thành phần đó (ví dụ: <Dashboard> )!

Params & Props

Bây giờ ta đã thấy cài đặt cơ bản, hãy xem cách bạn chuyển dữ liệu cho các tuyến đường.

Sử dụng Bộ định tuyến phạm vi tiếp cận:

//////////////////
//Reach-Router////
//////////////////

// Route definition
<Report
  path="dashboard/:reportId"  // static routes work too :)
  salesData={this.state.salesData}
>

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

Đó là nó?? Nó gần như quá ngắn gọn… Và bây giờ với React Router:

//////////////////
//React-Router////
//////////////////

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

const Report = ({ props, match }) => {
  return (
    <h1>
      {match.params.reportId}  // "match" is from react-router
      And
      {props.salesData}
    </h1>
  )
}

À, vâng… Bây giờ tôi nhớ nó trông như thế nào. 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. Ta hãy xem cách <Link> ing hoạt động trong cả hai thư viện.

Liên kết

Cả Reach Router và React Router đều xuất thành phần <Link> , nhưng có một số khác biệt. Hãy xem thành phần <Dashboard> của ta , có một số trang con:

//////////////////
//Reach-Router////
//////////////////

import { 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>
  )
}

Ái chà! Liên kết tương đối! Nó cũng hoàn toàn thể thao chuyển folder Unix giống như thẻ <a> .

Và bây giờ với React Router:

//////////////////
//React-Router////
//////////////////

import { 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ể hơn với <Link> , điều này thường nghĩa là bạn sẽ phải sử dụng match.url khi bạn có các đường dẫn con vượt ra ngoài một đường dẫn con root (ví dụ: /host/somethingFoo/👉somethingBar👈 ). Tất cả những điều này đều được Reach Router xử lý một cách thông minh. Ngoài ra, lưu ý bạn phải “quay lại” theo chương trình vì không có tiện ích nào để chuyển tương đối.

Kết luận

Dựa trên những so sánh này, Reach Router là một lựa chọn thay thế rất hấp dẫn cho React Router. Nhìn chung, nó thanh lịch hơn về hình thức (cách nó trông) và chức năng (bạn viết ít hơn, và thực sự làm được nhiều hơn!). Điều này không có gì đáng ngạc nhiên vì Ryan Florence là đồng tác giả của 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. Nó dường như hiển thị với reach-router .

Hãy thử dùng thử Reach Router! Bản phát hành v1.0 đầu tiên là một năm trước (tháng 5 năm 2018) và GatsbyJS v2 đã chọn Reach Router chống lại React Router ( thông báo ).

Tìm hiểu thêm

  • Tham quan video : Ryan Florence thực hiện chuyến tham quan bằng video về Reach Router
  • Tài liệu chính thức : Tài liệu có chất lượng cao và bao gồm nhiều bản trình diễn CodeSandbox tương tác
Tags:

Các tin liên quan