Hướng dẫn tiếp cận bộ định tuyến

Bắt đầu nhanh chóng để sử dụng Bộ định tuyến tiếp cận trong ứng dụng React của bạn

Trong dự án cuối cùng tôi đã làm, tôi đã sử dụngTiếp cận bộ định tuyếnvà tôi nghĩ đó là cách đơn giản nhất để định tuyến trong ứng dụng React.

Tôi nghĩ nó dễ dàng hơn nhiều so vớiBộ định tuyến React, là một bộ định tuyến khác mà tôi đã sử dụng trong quá khứ.

Dưới đây là một hướng dẫn 5 phút để có được những kiến thức cơ bản về nó.

Cài đặt

Trước tiên, hãy cài đặt nó bằng cách sử dụng

npm install @reach/router

Nếu@cú pháp mới đối với bạn, đó là một tính năng npm để cho phép một gói có phạm vi. Nói cách khác, một không gian tên.

Tiếp theo, nhập nó vào dự án của bạn.

import { Router } from '@reach/router'

Cách sử dụng cơ bản

Tôi sử dụng nó trong tệp React cấp cao nhất,index.jstrong mộttạo-phản ứng-ứng dụngcài đặt, gói tất cả các thành phần mà tôi muốn xuất hiện:

ReactDOM.render(
  <Router>
    <Form path="/" />
    <PrivateArea path="/private-area" />
  </Router>,
  document.getElementById('root')
)

Cácpaththuộc tính tôi thêm vào các thành phần cho phép tôi thiết lập đường dẫn cho chúng.

Nói cách khác, khi tôi nhập đường dẫn đó vào thanh URL của trình duyệt, Bộ định tuyến tiếp cận sẽ hiển thị thành phần cụ thể đó cho tôi.

Các/path là đường dẫn chỉ mục và hiển thị khi bạn không đặt URL / đường dẫn bên cạnh miền ứng dụng. Nói cách khác là “trang chủ”.

Tuyến đường mặc định

Khi người dùng truy cập một URL không khớp với bất kỳ tuyến đường nào, theo mặc định, Reach Router sẽ chuyển hướng đến/lộ trình. Bạn có thể thêm mộtdefaultđịnh tuyến để xử lý trường hợp này và thay vào đó hiển thị thông báo “404” đẹp:

<Router>
  <Form path="/" />
  <PrivateArea path="/private-area" />
  <NotFound default />
</Router>

Thay đổi tuyến đường theo chương trình

Sử dụngnavigatecó chức năng thay đổi tuyến đường theo chương trình trong ứng dụng của bạn:

import { navigate } from '@reach/router'

navigate('/private-area')

Liên kết đến các tuyến đường trong JSX

Sử dụngLinkđể liên kết đến các tuyến đường của bạn bằng JSX:

import { Link } from '@reach/router'

<Link to="/">Home</Link>
<Link to="/private-area">Private Area</Link>

Tham số URL

Thêm thông số bằng cách sử dụng:paramcú pháp:

<Router>
  <User path="users/:userId" />
</Router>

Bây giờ trong thành phần Người dùng giả định này, chúng ta có thể nhận đượcuserIdnhư một chỗ dựa:

const User = ({ userId }) => (
  <p>User {userId}</p>
)

Các tuyến đường lồng nhau

Tôi đã chỉ cho bạn cách các tuyến đường có thể được xác định theo cách này trong tệp React cấp cao nhất của bạn:

<Router>
  <Form path="/" />
  <PrivateArea path="/private-area" />
</Router>

Bạn có thể xác định các tuyến đường lồng nhau:

<Router>
  <Form path="/" />
  <PrivateArea path="/private-area">
    <User path=":userId" />
  </PrivateArea>
</Router>

Vì vậy, bây giờ bạn có thể có/private-area/23232điểm liên kết đến thành phần Người dùng, chuyểnuserId 23232.

Bạn cũng có thể chọn cho phép một thành phần xác định các tuyến đường riêng bên trong nó. Bạn sử dụng/*ký tự đại diện sau tuyến đường:

<Router>
  <Form path="/" />
  <PrivateArea path="/private-area/*" />
</Router>

sau đó bên trong thành phần, bạn có thể nhập lại Bộ định tuyến và xác định tập hợp các tuyến con của riêng nó:

//component PrivateArea
<Router>
  <User path="/:userId" />
</router>

Mọi tuyến đường sử dụng/private-area/somethingsẽ được xử lý bởi thành phần Người dùng và phần sau tuyến sẽ được gửi nhưuserIdchỗ dựa.

Để hiển thị một cái gì đó trong/private-areatuyến đường bây giờ bạn cũng cần thêm một/xử lý trongPrivateAreathành phần:

//component PrivateArea
<Router>
  <User path="/:userId" />
  <PrivateAreaDashboard path="/" />
</router>

Tải xuống miễn phí của tôiSổ tay React