React series - Chương 2: React router

React cơ bản là một thư viện đơn giản, và nó không quy định về Router bên trong nó như thế nào cả. Và điều đó nảy sinh ra một vấn đề về Router trong ứng dụng Single application. Và đó là khởi đầu cho sự ra đời của React Router. React Router là một thư viện rất được ưa chuộng sử dụng bên trong React, và hầu hết mọi project React đều sử dụng nó.

Routing trong Single Page App căn bản là điều hướng các tính năng thông qua các liên kết, đơn giản như:

1. Trình duyệt thay đổi URL khi người dùng thay đổi sang màn hình tương tác.
2. Khi người dùng tương tác với trình duyệt, ở đây là click vào một link trên màn hình. Browser sẽ trả về màn hình tương ứng.
3. Phím quay về và trở lại trong trình duyệt hoạt động bình thường.

1. cài đặt React Router

Với npm:

npm i --save react-router-dom

Với Yarn:

yarn add react-router-dom

2. Các loại Routers

Có hai loại React Rouer mà chúng ta cần tìm hiểu:

• BrowserRouter: https://application.com/dashboard

  BrowserRotuer sử dụng history API(không được hỗ trợ trong các trình duyệt cũ như IE 9 và các bản tương tự..) BrowserRouter h hỗ trợ route tương tự như example.com/react/route giống các url thông thường. Tuy nhiên dạng hiển thị này chỉ có nghĩa đối với React App, nếu trên server chưa được định nghĩa cá router này khi reload lại trang sẽ báo lỗi không có router này. Cách khắc phục đơn giản là tạo các route tương ứng hoặc đối với single page app mình thường cấu hình get '*path', to: 'app#index'

• HashRouter: https://application.com/#/dashboard

  Khi bạn đang ở địa chỉ https://application.com/#/dashboard và reload lại trang, server sẽ hiểu là bạn đang muốn đi tới trang với router là https://application.com/. Sau khi nhận được dữ liệu từ server về, ứng dụng react của bạn sẽ tiếp tục lấy các thông tin từ #/dashboard để tiếp tục xử lý và lấy ra view hiển thị cần thiết.

Đối với các project Single page app hiện tại hầu hết các page app đều đi kèm với server rendering nên việc sử dụng BrowserRotuer là thông dụng hơn cả. Nhưng đối với các trang web tĩnh thì việc sử dụng HashRoutwer sẽ là giải pháp tốt hơn.

3. Thành phần

Có 3 thành phần cơ bản bạn sẽ tương tác nhiều nhất với ReacRouter đó là

• BrowserRouter, thường được đặt tên là Router: Nằm ngoài cùng, bao lấy các Route của app
• Link: Sử dụng để tạo liên kết cho routes
• Route: là component chính của ReactRoute. Bất cứ nơi nào mà bạn muốn chỉ render ra một cái gì đó phù hợp đường dẫn, bạn nên tạo một phần tử Route. Một Route dự kiến một đường dẫn prop, nó mô tả loại path phù hợp với route

3.1. BrowserRotuer

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 ví dụ đơn giản về BrowserRouter. Bạn cần phải import 'react-router-dom' và sử dụng nó để bao lại các thành phần khác bên trong nó.

Một BrowserRouter có thể chỉ có một phần tử con, và bắt buộc phải bao trong một thẻ div.

3.2. Link

Link được sử dụng để truy cập tới routers khác. Giống như BrowserRouter, chúng ta cần import react-router-dom' để có thể sử dụng. Về cách sử dụng khá đơn giản, bạn có thể dử dụng link cho mọi routes với phần tử to:

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')

3.3. Route

Bây giờ chúng ta sẽ thêm một Route trong một ví dụ đơn giản để có thể hiểu về cách hoạt động của 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>

      <main>
        <Route exact path="/" component={Dashboard} />
        <Route path="/about" component={About} />
      </main>
    </div>
  </Router>,
  document.getElementById('app')
)

Demo tại: https://flaviocopes-react-router-v4.glitch.me/

Giải thích ngắn gọn qua một chút:

• Khi route với /, ứng duyngj sẽ hiển thị Dashboard
• Khi route được thay đổi bằng cách click About, trang web sẽ được dẫn tới /about, Dashboard component sẽ được gỡ khỏi Dom và thay vào đó là component About sẽ được render ra màn hình hiển thị.
• Chú ý thuộc tính exact. Bởi với path="/" react cũng có thể hiểu là /about bởi / cũng chứa trong route của /about

4. Multiple paths trong react-routes

Bạn có thể truy cập tới một component bằng nhiều route khác nhau bằng cách sewr dụng regex. Đơn giản như:

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

5. INLINE RENDERING

Thay vì chỉ định một thuộc tính thành phần trên route, bạn có thể render nó ngay trong route:

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

6. Sử dụng route động với params

Ví dụ bạn có một route tĩnh như;

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

//...

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

Bây giờ làm thế nào để chúng ta có một route động nhỉ :-? Đơn giảm thôi