Giới thiệu về React Router

React Router 4 là công cụ hoàn hảo để liên kết URL và ứng dụng React của bạn với nhau. React Router là thư viện định tuyến React trên thực tế và nó là một trong những dự án phổ biến nhất được xây dựng trên React.

Hướng dẫn này giới thiệu React Router 4, phiên bản ổn định cuối cùng

React Router là thư viện định tuyến React trên thực tế và nó là một trong những dự án phổ biến nhất được xây dựng trên React.

React cốt lõi của nó là một thư viện rất đơn giản và nó không ra lệnh cho bất cứ điều gì về định tuyến.

Định tuyến trong một ứng dụng trang là cách để giới thiệu một số tính năng để điều hướng ứng dụng thông qua các liên kết,hy vọngtrong các ứng dụng web thông thường:

Trình duyệt nênthay đổi URLkhi bạn điều hướng đến một màn hình khác
Liên kết sâusẽ hoạt động: nếu bạn trỏ trình duyệt đến một URL, ứng dụng sẽ tạo lại cùng một chế độ xem đã được trình bày khi URL được tạo.
Cácnút quay lại (và chuyển tiếp) trình duyệtnên hoạt động như mong đợi.

Định tuyến liên kết với nhau điều hướng ứng dụng của bạn với các tính năng điều hướng do trình duyệt cung cấp: cácthanh địa chỉvànút điều hướng.

React Router cung cấp một cách để viết mã của bạn đểnó sẽ hiển thị một số thành phần nhất định của ứng dụng của bạn chỉ khi tuyến đường khớp với những gì bạn xác định.

Cài đặt

Vớinpm:

npm install react-router-dom

Các loại tuyến đường

React Router cung cấp hai loại tuyến đường khác nhau:

BrowserRouter
HashRouter

Một tạo các URL cổ điển, một tạo URL bằng hàm băm:

https://application.com/dashboard   /* BrowserRouter */
https://application.com/#/dashboard /* HashRouter    */

Việc sử dụng cái nào chủ yếu do trình duyệt bạn cần hỗ trợ quyết định.BrowserRoutersử dụngAPI lịch sử, tương đối gần đây và không được hỗ trợ trong IE9 trở xuống. Nếu bạn không phải lo lắng về các trình duyệt cũ hơn, đây là lựa chọn được khuyến nghị.

Các thành phần

3 thành phần bạn sẽ tương tác nhiều nhất khi làm việc với React Router là:

BrowserRouter, thường có bí danh làRouter
Link
Route

BrowserRouterbao bọc tất cả các thành phần Tuyến đường của bạn.

Linkcác thành phần - như bạn có thể tưởng tượng - được sử dụng để tạo liên kết đến các tuyến đường của bạn

Routecác thành phần chịu trách nhiệm hiển thị - hoặc ẩn - các thành phần mà chúng chứa.

BrowserRouter

Đây là một ví dụ đơn giản về thành phần BrowserRouter. Bạn nhập nó từ react-router-dom và bạn sử dụng nó để bọc tất cả ứng dụng của mình:

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router } from 'react-router-dom'
ReactDOM.render(
<Router>
<div>
<!– –>
</div>
</Router>,
document.getElementById(‘app’)
)

Một thành phần BrowserRouter chỉ có thể có một phần tử con, vì vậy chúng tôi kết hợp tất cả những gì chúng tôi sẽ thêm vàodivthành phần.

Liên kết

Thành phần Liên kết được sử dụng để kích hoạt các tuyến mới. Bạn nhập nó từreact-router-domvà bạn có thể thêm các thành phần Liên kết để trỏ đến các tuyến đường khác nhau, vớitothuộc tính:

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Link } from 'react-router-dom'
ReactDOM.render(
<Router>
<div>
<aside>
<Link to={/dashboard}>Dashboard</Link>
<Link to={/about}>About</Link>
</aside>
<!– –>
</div>
</Router>,
document.getElementById(‘app’)
)

Lộ trình

Bây giờ, hãy thêm thành phần Tuyến đường trong đoạn mã trên để làm cho mọi thứ thực sự hoạt động như chúng ta muốn:

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Link, Route } from 'react-router-dom'
const Dashboard = () => (
<div>
<h2>Dashboard</h2>
…
</div>
)
const About = () => (
<div>
<h2>About</h2>
…
</div>
)
ReactDOM.render(
<Router>
<div>
<aside>
<Link to={/}>Dashboard</Link>
<Link to={/about}>About</Link>
</aside>
  <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">main</span><span style="color:#f92672">&gt;</span>
    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">Route</span> <span style="color:#a6e22e">exact</span> <span style="color:#a6e22e">path</span><span style="color:#f92672">=</span><span style="color:#e6db74">'/'</span> <span style="color:#a6e22e">component</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">Dashboard</span>} <span style="color:#f92672">/&gt;</span>
    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">Route</span> <span style="color:#a6e22e">path</span><span style="color:#f92672">=</span><span style="color:#e6db74">'/about'</span> <span style="color:#a6e22e">component</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">About</span>} <span style="color:#f92672">/&gt;</span>
  <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/main&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>
</Router>,
document.getElementById(‘app’)
)

Kiểm tra ví dụ này trên Glitch:https://glitch.com/edit/#!/flaviocopes-react-router-v4/

Khi tuyến đường phù hợp/, ứng dụng hiển thịbảng điều khiểnthành phần.

Khi tuyến đường được thay đổi bằng cách nhấp vào liên kết "Giới thiệu" để/about, thành phần Trang tổng quan bị xóa vàTrong khoảngthành phần được chèn vào DOM.

Chú ýexactthuộc tính. Nếu không có cái này,path="/"cũng sẽ phù hợp/about, từ/được chứa trong tuyến đường.

Khớp nhiều đường dẫn

Bạn có thể có một tuyến đường phản hồi với nhiều đường dẫn bằng cách sử dụng regex, bởi vìpathcó thể là một chuỗi biểu thức chính quy:

<Route path='/(about|who)/' component={Dashboard} />

Kết xuất nội tuyến

Thay vì chỉ định mộtcomponenttài sản trênRoute, bạn có thể đặt mộtrenderchống đỡ:

<Route
  path='/(about|who)/'
  render={() => (
    <div>
      <h2>About</h2>
      ...
    </div>
  )}
/>

Khớp thông số tuyến đường động

Bạn đã thấy cách sử dụng các tuyến tĩnh như

const Posts = () => (
  <div>
    <h2>Posts</h2>
    ...
  </div>
)
//…

<Route exact path="/posts" component={Posts} />

Dưới đây là cách xử lý các tuyến đường động:

const Post = ({match}) => (
  <div>
    <h2>Post #{match.params.id}</h2>
    ...
  </div>
)
//…

<Route exact path="/post/:id" component={Post} />

Trong thành phần Tuyến đường của bạn, bạn có thể tra cứu các thông số động trongmatch.params.

matchcũng có sẵn trong các tuyến được hiển thị nội tuyến và điều này đặc biệt hữu ích trong trường hợp này, bởi vì chúng tôi có thể sử dụngidtham số để tra cứu dữ liệu bài đăng trong nguồn dữ liệu của chúng tôi trước khi hiển thị Bài đăng:

const posts = [
  { id: 1, title: 'First', content: 'Hello world!' },
  { id: 2, title: 'Second', content: 'Hello again!' }
]
const Post = ({post}) => (
<div>
<h2>{post.title}</h2>
{post.content}
</div>
)
//…

<Route exact path="/post/:id" render={({match}) => (
<Post post={posts.find(p => p.id === match.params.id)} />
)} />

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