Hướng dẫn React Router v4 – Điều hướng cho ứng dụng React

Trước khi tôi bắt đầu bài viết này, tôi mong rằng các bạn đã có những kiến thức cơ bản về React (có thể xem hướng dẫn React ở đây). Nếu chưa, hay xem những hướng dẫn đó để hiểu được React trước khi đọc bài viết này. Trong quá trình học căn bản, tôi chắc rằng bạn sẽ thắc mắc làm cách nào để điều hướng (route) ứng dụng web. Bài viết này chính là câu trả lời cho bạn. Trong hướng dẫn React Router này, tôi sẽ hướng dẫn cho bạn về chủ đề Điều hướng trong React.

Ta sẽ tuần tự điểm qua những chủ đề sau:

Điều hướng truyền thống.
Tại sao lại cần React Router?
Điều hướng trong React.
Ưu điểm của React Router phiên bản 4.

Điều hướng truyền thống

Thông thường, khi người dùng đánh đường dẫn trang web trên trình duyệt, 1 HTTP request sẽ được gửi đến server, tương ứng với nó 1 trang HTML sẽ được lấy ra. Với mỗi 1 đường dẫn mới, người dùng sẽ được điều hướng lại đến 1 trang HTML mới. Hãy tham khảo biểu đồ bên dưới để hiểu hơn về cách điều hướng.

https://cdn.edureka.co/blog/wp-content/uploads/2017/09/routing_blog.png

Tại sao lại cần React Router?

Việc 1 SPA bị giới hạn trong 1 view đơn thật không đánh giá đúng rất nhiều các ứng dụng xã hội media như Facebook, Instagram, những ứng dụng render rất nhiều view. Ta cần bỏ qua điều giới hạn đó và học cách hiển thị nhiều view trên 1 SPA.

Lấy ví dụ, ta đã quen với việc 1 trang home sẽ hiển thị lời chào và các nội dung liên quan. Chi tiết trang web sẽ được tìm thấy ở trang “About us”, danh sách người dùng ở 1 trang khác và sẽ có kha khá các trang khác nữa chứa các nội dung khác nhau.

Bạn có nghĩ là nó thuận tiện? Hãy thêm thư viện điều hướng vào ứng dụng để cảm nhận sự khác biệt nhé.

Điều hướng trong React

Ok, vào phần chính của bài viết hôm nay: React Router v4. Vào ngày 13 tháng 3 năm 2017, Micheal Jackson và Ryan Florence đã công bố React Router v4 cùng với tài liệu đi kèm.

Họ tin vào khẩu hiệu: “Học 1 lần, điều hướng mọi nơi“.

Trong bài diễn văn ở React Conf 2017, họ đã giải thích bằng cách biểu diễn cách điều hướng từ nền tảng Web đến Native 1 cách mượt mà, cũng như tích hợp React Router vào VR và tạo hiệu ứng với React Native. Bài nói của họ tập trung vào nội dung “Cách API Router là thuần component”.

Trong React, chỉ có 1 file HTML được gọi. Bất cứ khi nào người dùng nhập 1 đường dẫn mới, thay vì lấy dữ liệu từ server, Router sẽ chuyển sang 1 Component khác ứng với mỗi đường dẫn mới. Đối với người dùng thì họ đang chuyển qua lại giữa nhiều trang nhưng thực tế, mỗi Component đơn lẻ sẽ được render lại phụ thuộc đường dẫn.

Cách mà React làm được điều đó?

Lúc này là lúc ta tìm hiểu về chủ đề “History“. Trong React, Router sẽ kiểm tra History cho mỗi Component và bất cứ khi nào có thay đổi trong History, Component đó sẽ được render lại. Trước khi có React Router v4, ta phải set giá trị History thủ công. Việc này đã được tự động ở Router v4 bằng thẻ <BrowserRouter>. Nếu bạn vẫn cần truy cập vào History, HTML5 cung cấp 1 API có sẵn cho phép điều chỉnh đối tượng History thông qua các phương thức pushState và replaceState.

Thực tế, React Router v4 được viết lại hoàn toàn từ các phiên bản trước đó. Sẽ cần thời gian để hiểu rõ nó, tuy nhiên React Router v4 rất đáng để thử đấy nhé!

Bây giờ thì hãy tìm hiểu kĩ xem React Router v4 có gì nhé.

Ưu điểm của React Router v4

Về cơ bản ta sẽ gọi Router Component bên trong phương thức Render của React. Đó là bởi vì toàn bộ Router API đều là Component. Dĩ nhiên, mỗi Component sẽ được render ra như bất cứ 1 ứng dụng React nào khác.

1. Không cần set History thủ công

Ta chỉ cần làm 1 việc đơn giản đó là gói Router lại bên trong thẻ <BrowserRouter>

ReactDOM.render((
<BrowserRouter>
<App/>
</BrowserRouter>
), document.getElementById(“root”));

Bây giờ hãy xem ví dụ dưới để hiểu thêm về routing. Ta sẽ tạo 3 trang. Ứng với nó sẽ là địa chỉ tương ứng:

Page	Address
Home	“/”
About	“/about”
Topic	“/topic”

2. Tách package

Thư viện “react-router” bây giờ đã tách ra thành 3 package nhỏ:

react-router-dom: dành cho ứng dụng web.
react-router-native: dành cho ứng dụng mobile.
react-router-core: sử dụng bất cứ lúc nào với các ứng dụng lõi.

Ta cần cài đặt dependency:

$ npm install --save react-router-dom

(sử dụng lệnh save nếu bạn không cài npm bản mới nhất).

Ta sẽ import Component “BrowerRouter” từ thư viện “react-router-dom” cùng với “Link” và “Route”.

import {
BrowserRouter,
Route,
Link
} from 'react-router-dom'

Hãy tìm hiểu về Link và Route trước khi tiếp tục các ưu điểm của phiên bản 4.

Link

Link được sử dụng để điều hướng bên trong các route nội. Nó tương đương với thẻ <a></a>.

Tham số được truyền vào Link là “to”, nhận vào đường dẫn url.

<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/topics">Topics</Link></li>
</ul>

Route

Bây giờ ta sẽ xem <Route>, thứ sẽ được xem như là 1 Component con chịu tránh nhiệm render UI, dựa trên location người dùng truyền vào. Nếu người dùng chỉ định 1 location trùng với path được định nghĩa trong <Route>, lúc này thì <Route> sẽ định nghĩa View theo 2 cách:

Tạo Component được chỉ định trong <Route>.
Sử dụng hàm render.

<Route> sẽ trả về null trong trường hợp url nhập vào không trùng với path định nghĩa. <Route> về cơ bản nhận vào 2 tham số, 1 là path và còn lại là component sẽ render.

Dưới đây là ví dụ:

<BrowserRouter>
  <div>
    <Route exact path="/" render={ ( ) => (<h2> HomePage </h2>) } />
    <Route path="/about" component={About}/>
    <Route path="/topics" component={Topics}/>
  </div>
</BrowserRouter>

3. IndexRoute được thay thế bằng từ khóa “exact“.

Với v4 ta không cần IndexRoute để render trang home nữa. Thay vào đó ta sử dụng props “exact” như ví dụ phía trên.

Route trong phiên bản 4 này còn có ý nghĩa rằng có thể có nhiều hơn 1 route được render cùng lúc. Ta tận dụng props “exact” để giải quyết sự bất đồng khi có nhiều path match thay vì chỉ 1.

Trong ví dụ trên, nếu không sử dụng “exact”, đường dẫn “/” sẽ match với cả “/”, “/about”, “/topic”. Tuy nhiên ta chỉ muốn nó match với Route chứa hàm render, và sử dụng “exact” sẽ giải quyết được điều này.

4. Route chỉ có thể có 1 thành phần con đơn lẻ.

Đây chính là lý do ta phải gói tất cả route lại bằng thẻ <div>.

Nếu không làm thế, ứng dụng sẽ đưa ra thông báo lỗi sau:

* Uncaught Error: A <Router> may have only one child element *

5. Switch

Ở phần trước đã biểu diễn cách gói nhiều route vào trong 1 thẻ <div>, thì ở phần này khi muốn render chỉ 1 Component trong 1 thời điểm, ta dùng thẻ tag <Switch>. Nó sẽ có ý nghĩa: kiểm tra path có match hay không tuần tự từ trên xuống và ngừng lại ở path đầu tiên match với đường dẫn nhập vào.

<switch>
   <route exact path=’/’   component={Home}/>
   <route path=’/users/:id’ component={User }/>
   <route path=’/users’   component={Roster}/>
<switch>

Trong ví dụ trên, ta đã đặt route có path “/users/:id” phía trên route có path là “/users”. Lý do là bởi vì “/users/:id” sẽ match với cả “/users/:id” và “/users”.

Cuối cùng thì bạn cũng đã có những hiểu biết cơ bản về React Router v4. Dưới đây là đoạn code tổng hợp nội dung của bài viết này.

const App= () => (
  <BrowserRouter>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/topics">Topics</Link></li>
      </ul>
      <Route exact path="/" render={ ( ) => (<h2> HomePage </h2>) } />
      <Route path="/about" component={About}/>
      <Route path="/topics" component={Topics}/>
    </div>
  </BrowserRouter>
)