Two ways to navigate programmatically with React Router (React siêu cơ bản)
reactjs
45
react-router-dom
1
White

Hát que viết ngày 11/09/2019

Dẫn nhập

Khi bắt tay vào làm một dự án React, chắc hẳn các bạn beginner sẽ nghĩ tới ngay boilerplate create-react-app thần thánh. Và đi kèm với anh chàng này, đảm nhiệm vai trò quản lý route, quen thuộc nhất có lẽ là react-routerreact-router-dom

Các class Switch, Route, Redirect được import từ react-router-dom giúp cho việc quản lý route trong React trở nên rất dễ dàng

alt text
Tuy nhiên, react-router-dom còn làm được nhiều điều hơn thế. Hôm nay mình xin trình bày 2 cách navigate sang một link khác một cách dynamically/programmatically bằng react-router-dom

Cách 1: Dùng Redirect component

Cách này ta dùng Redirect component của react-router-dom, dựa dẫm vào tính re-render UI khi thay đổi state của React

Trước tiên ta tạo 2 file Main.jsMyComponents.js (Lưu ý mình dùng create-react-app để tạo cái ví dụ này)

File Main.js
alt text

File MyComponents.js
alt text

Chỉnh sửa file App.js luôn
alt text

Ý tưởng của đoạn code trên: Đó là chúng ta có 3 cái url /java, /python, /scala. Khi truy cập vào url /<something> thì component <Something> sẽ render ra. Trong component có in ra dòng This is <Something> component.

Riêng Java Component sẽ được viết khác biệt. Ta dùng Class để có thể sử dụng được state. Và component này sẽ có thêm một button 'Click me!', khi click vào button đó thì nó sẽ navigate sang url/route /python. Đó chính là cái các bạn đang muốn xem lúc này

Chạy npm run start thử coi
Ngon lành, sẵn sàng thôi

alt text

alt text

alt text

Ở hình trên, trong Java component mình đã tạo sẵn cái state với field flag - giá trị khởi tạo là false rồi.
Ý tưởng của mình là nếu flag là false thì ta sẽ render component này như bình thường, khi click vào button, ta sẽ gọi setState() để set flag thành true, khi đó component được re-render và gọi lại hàm render, lúc này flagtrue và hàm render sẽ return về một Redirect component.
Thôi khỏi vòng vo, các bạn xem hình code được sửa bên dưới là sẽ hiểu :smile:
alt text

Cách 2: Dùng history props

Bạn có biết, Component nào mà được pass vào component props của thằng Route component, thì sẽ mặc định được truyền thêm 3 tham số: location, matchhistory. Tức là props của thằng đó có thêm 3 thằng này

alt text

alt text

Hình ảnh 3 object in ra trên Console
alt text

Trong bài chia sẻ lần này, mình dùng sẽ history để phục vụ cho mục đích navigate một cách programiccally.
Sơ lược một chút vềhistory: thằng này đến từ thư viện History, với hàng tá properties giúp thao tác với url một cách tiện lợi. Ví dụ: history.push, history.replace,...
Được rồi, giờ giả sử click vào button 'Click me!', redirect sang url /scala thì làm sao?
alt text
Xong!! Haizz, dễ quá, mấy cái này người ta học ngành Vật lý người ta cũng làm được. Dăm ba cái React :pensive:

Giải thích: history.push thực hiện việc push một entry mới vào history stack - nói ngắn gọn là redirect qua url khác và khi ta bấm nút Back trên browser, ta sẽ qua về trang cũ :smile:
Lưu ý: Bạn cũng có thể dùng history.replace, nó cũng làm công việc tương tự nhưng khi bấm nút Back trên browser nó sẽ không quay về trang cũ

Cơ mà, giả sử như ta thực hiện việc navigate trong một component không phải là component được gắn với tham số component trong Route thì sao? Tức là nó không được ngầm định truyền tham số history thì sao?

Lúc này ta dùng đến câu lệnh

import { withRouter } from 'react-router-dom';

và khi export component (giả sử dùng export default):

export default withRouter(MyComponent);

lúc đó bạn có thể sử dụng history cũng như 2 tham số còn lại: match, location trích từ props của component

Nhận xét: Cách 2 có vẻ tiện dụng và gọn gàng hơn cách 1 :smile:

Cảm ơn các bạn đã theo dõi bài viết! Bài viết của mình còn nhiều thiếu sót, mong được các bạn góp ý để hoàn thiện :smile:

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Hát que

1 bài viết.
0 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Bài viết liên quan
White
8 2
(Link) (Link) &mdash; tracks device battery state. (Link) (Link) &mdash; tracks geo location state of user's device. (Link) (Link) &mdash; tr...
Đinh Viễn viết 1 tháng trước
8 2
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
1 bài viết.
0 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!