Bài 07: Khóa học React - Router

 

    1/ Giới thiệu

 Trong khi React.js chúng ta phải tạo các component nó sẽ giúp giao diện người dùng đồng bộ URL làm tăng tốc độ tải của trang web.

Giờ đây chúng ta tìm hiểu các thành phần :

    -    Tạo ứng dụng SPA chuyển trang => Không load lại trang(link và Navlink).

    -    Tìm hiểu activeStyle, ActiveClassName: Thay đổi định dạng đối với router hiện hành.

    -    Không tìm thấy Router.

    -    Lấy tham số URL: đối tượng match.

    -    Prompt: là một chức năng nhập dữ liệu mà thoát thì phải thông báo cho người dùng trở về hay tiến tiếp.

    -    Rdirect.

    2/ Các vấn đề cần quan tâm:

    -    có hai vấn đề cần quan tâm:

        - Nơi chứa các Menu.

        - Vùng sẽ thay đổi khi chọn một Router tương ứng.

    -    Sử dụng đối tượng Link hoặc NavLink.

=> link học : https://reactrouter.com/web/guides/quick-start

-    cài react-router-dom:    npm install react-router-dom --save

-    Cách custom ra thẻ : Menulink

const MenuLink = ({label, to,activeOnlyWhenExact }) => {

    return(

        <Route path={to} exact={activeOnlyWhenExact} children={({match})=>{

            var active = match ? 'active abc' : '';

            return(

                <li className={active}>

                    <Link to={to} className="my-link">

                        {label}

                    </Link>

                </li>

            )

        }}/>

    )

}

Muốn thêm nhiều class active:

<li className={'my-li ${active}'}>

    <Link to={to} className="my-link">

        {label}

    </Link>

</li>

Tìm hiểu về xác nhận trước khi chuyển trang: tìm hiểu về đối tượng Prompt.

(đọc mã nguồn màu xanh)

import React, {Component} from 'react';

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

class Contact extends Component {

    constructor(props){

        super(props);

        this.state = {

            isChecked : false

        }

    }

    onClick = (isChecked) =>{

        this.setState({

            isChecked : isChecked

        })

    }

    render(){

        var {isChecked} = this.state;

        return (

            <div>

                Đây là trang liên hệ.<br/>

                <button type="button" class="btn btn-ifno" onClick={ () => this.onClick(false)}>Cho Phép</button><br/>

                <button type="button" class="btn btn-ifno" onClick={ () => this.onClick(true)}>Không Cho Phép</button>

                <Prompt

                    when={isChecked}

                    message={location => (`bạn có chắc đi đến ${location.pathname}`)}

                />

            </div>

        );

    }

}

 

export default Contact;

Cài Đặt JSON Server :    npm install -g json-server

Tạo một filedb.json :

{

  "posts": [

    { "id": 1, "title": "json-server", "author": "typicode" }

  ],

  "comments": [

    { "id": 1, "body": "some comment", "postId": 1 }

  ],

  "profile": { "name": "typicode" }

}

2: Cách cài đặt Json server:

câu lệnh cài đặt : npm install -g json-server

Chạy  JSON Server    :     json-server --watch db.json

tạo mộ file  db.json với dữ liệu : 

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

Bắt đầu chạy Json server:    json-server --watch db.json

Bây giờ nếu bạn truy cập http: // localhost: 3000 / posts / 1 bạn sẽ nhận được

{ " id " : 1 , " title " : " json-server " , " author " : " typicode " }

Link Tham khảo : https://github.com/typicode/json-server#routes

Học thêm về Axios: https://github.com/axios/axios

MockAPI : https://mockapi.io/projects/604dbbc42a808e001778440b

    material-ui:  https://material-ui.com/