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.
- Cài đặt
- Các loại tuyến đường
- Các thành phần
- BrowserRouter
- Liên kết
- Lộ trình
- Khớp nhiều đường dẫn
- Kết xuất nội tuyến
- Khớp thông số tuyến đường động
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.BrowserRouter
sử 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
BrowserRouter
bao bọc tất cả các thành phần Tuyến đường của bạn.
Link
cá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
Route
cá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àodiv
thà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-dom
và 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ớito
thuộ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"><</span><span style="color:#a6e22e">main</span><span style="color:#f92672">></span>
<span style="color:#f92672"><</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">/></span>
<span style="color:#f92672"><</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">/></span>
<span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/main></span>
<span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/div></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ú ýexact
thuộ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ìpath
có 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ộtcomponent
tài sản trênRoute
, bạn có thể đặt mộtrender
chố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
.
match
cũ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ụngid
tham 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
Các hướng dẫn về phản ứng khác:
- Ví dụ về ứng dụng React đơn giản: tìm nạp thông tin người dùng GitHub qua API
- Tạo một bộ đếm đơn giản với React
- Thiết lập mã VS để phát triển React
- Cách chuyển các đạo cụ cho một thành phần con thông qua React Router
- Tạo ứng dụng với Electron và React
- Hướng dẫn: tạo Bảng tính bằng React
- Lộ trình học React
- Tìm hiểu cách sử dụng Redux
- Bắt đầu với JSX
- Các thành phần được tạo kiểu
- Giới thiệu về Redux Saga
- Giới thiệu về React Router
- Giới thiệu về React
- Các thành phần React
- DOM ảo
- Sự kiện React
- Trạng thái phản ứng
- React Props
- Phân đoạn phản ứng
- API ngữ cảnh phản ứng
- React PropTypes
- Các khái niệm phản ứng: khai báo
- React: Cách hiển thị một thành phần khác khi nhấp chuột
- Cách lặp lại bên trong React JSX
- Props so với State trong React
- Bạn nên sử dụng jQuery hay React?
- Bạn cần biết bao nhiêu JavaScript để sử dụng React?
- Giới thiệu về Gatsby
- Cách tham chiếu phần tử DOM trong React
- Luồng dữ liệu một chiều trong React
- React Các thành phần thứ tự cao hơn
- Sự kiện vòng đời phản ứng
- Khái niệm React: Tính bất biến
- Khái niệm React: Độ tinh khiết
- Giới thiệu về React Hooks
- Giới thiệu về ứng dụng tạo-phản ứng
- Khái niệm React: Thành phần
- React: Các thành phần trình bày so với vùng chứa
- Tách mã trong React
- Kết xuất phía máy chủ với React
- Cách cài đặt React
- CSS trong React
- Sử dụng SASS trong React
- Xử lý các biểu mẫu trong React
- Chế độ phản ứng nghiêm ngặt
- Cổng phản ứng
- React Render Props
- Kiểm tra các thành phần React
- Cách chuyển một tham số cho các trình xử lý sự kiện trong React
- Cách xử lý lỗi trong React
- Cách trả về nhiều phần tử trong JSX
- Kết xuất có điều kiện trong React
- React, cách chuyển đạo cụ sang các thành phần con
- Cách lấy giá trị của một phần tử đầu vào trong React
- Cách sử dụng hook useState React
- Cách sử dụng useCallback React hook
- Cách sử dụng useEffect React hook
- Cách sử dụng useMemo React hook
- Cách sử dụng hook useRef React
- Cách sử dụng hook useContext React
- Cách sử dụng useReducer React hook
- Cách kết nối ứng dụng React của bạn với một chương trình phụ trợ trên cùng một nguồn gốc
- Hướng dẫn tiếp cận bộ định tuyến
- Cách sử dụng Công cụ dành cho nhà phát triển React
- Cách học React
- Cách gỡ lỗi ứng dụng React
- Cách hiển thị HTML trong React
- Cách sửa lỗi không khớp với `` risklySetInnerHTML '' trong React
- Cách tôi khắc phục sự cố với trạng thái biểu mẫu đăng nhập React và tính năng tự động điền của Trình duyệt
- Cách định cấu hình HTTPS trong ứng dụng React trên localhost
- Cách khắc phục lỗi "không thể cập nhật một thành phần trong khi hiển thị một thành phần khác" trong React
- Tôi có thể sử dụng React hooks bên trong một điều kiện không?
- Sử dụng useState với một đối tượng: cách cập nhật
- Cách di chuyển xung quanh các khối mã với React và Tailwind
- Phản ứng, tập trung một mục trong React khi được thêm vào DOM
- Phản ứng, chỉnh sửa văn bản trên doubleclick