react-router v6對比react-router v5

簡述: 

　   1. react-router v6 原生支援typeScript ; 安裝方法 npm install react-router-dom@6

　   2. react-router v5 原生不支援typeScript,  需要安裝 @types/react-router-dom 來支援ts ;  安裝方法  npm install react-router-dom@5

　   3. react-router v5 路由配置 :　<BrowserRouter /> + <Switch /> + <Route />

　　　　

　   4. react-router v6 路由配置 :   <BrowserRouter /> + <Routes/ > + <Route />

　   5. react-router v5和react-router v6差別:  官方文檔 v5=>v6的變化

正常簡單路由配置Demo圖:

　　1. react-router v5:   

　　　　 通過props注入來擷取路由狀态;   

　　　　 (HOC高階元件) withRouter==>history, location, match;    可以使任意元件都具備這些屬性

　　　　 函數式元件:  useHistory, useLocation, useParams, useRouteMatch  來搞定

　　

　　2. react-router v6: 

　　　　 因為完全倒向函數式元件;  直接用 hooks就行,useLocation,useParams;    注意 useHistory改成了 useNavigate

　　

 　　

拓展: 

 一 . react-router v5: 三種常用的跳轉   和   擷取url參數:  

 1.  HOC 高階元件  withRouter 跳轉傳值通信  

import React, { Component } from 'react'

import { withRouter } from 'react-router-dom';
//3. HOC 高階元件  withRouter 傳值通信   


export class LoginPage extends Component {

    render () {
        console.log(this.props)
        const { history, match, location } = this.props
        console.log(match.params) // 擷取上個頁面的路由參數
        console.log(history, match, location)
        return (
            <>
                <h1 onClick={() => history.push('/')}>withRouter跳轉55555{match.params.id}</h1>
                <h1 onClick={() => history.goBack()}>傳回{match.params.id}</h1>
                <h1 onClick={() => history.goForward()}>前進{match.params.id}</h1>
            </>
        )
    }
}
export default withRouter(LoginPage)      

　　　

 2.  hooks 跳轉頁面傳值通信  　引入  import { useHistory, useLocation, useParams, useRouteMatch } from 'react-router-dom';

import { Button } from 'antd';
import { useHistory, useLocation, useParams, useRouteMatch } from 'react-router-dom';

export const HomePage = (props) => {
    const history = useHistory()
    const location = useLocation()
    const params = useParams()
    const routeMatch = useRouteMatch()
    console.log(history, location, params, routeMatch)
    return (
        <>
            <div style={{ marginTop: 100 }}>
                <Button type="primary" onClick={() => history.push(`login/111`)}>跳轉登入</Button>
                <Button>跳轉注冊</Button>
            </div>

        </>
    )

}      

  3. Link跳轉頁面傳值通信   引入  import { Link } from 'react-router-dom'

import { Button } from 'antd';
import {Link } from 'react-router-dom';

export const HomePage = () => {return (
            <div style={{ marginTop: 100 }}>
                {/* 2. Link元件跳轉頁面 */}
                <Link to={`login/444`}>
                    <Button type="dashed">Link元件跳轉</Button>
                </Link>
            </div>
    )
}      

二 . react-router v6: 兩種常用的跳轉   和   擷取url參數: 

 1.  useNavigate

import React from "react";
import styles from './Header.module.css'
import { Button } from 'antd'
import { useParams, useLocation, useNavigate } from "react-router-dom";

export const Header: React.FC = (id=0) => {

    const navigate = useNavigate() // 進行頁面的處理
    const location = useLocation() // 目前路徑資訊,儲存目前路由狀态
    const params = useParams() // 擷取url參數
    console.log(navigate, location, params)
return (
        <div className={styles['App-header']}>
            <div className={styles['App-header-box']}>
                    <Button.Group>
                        <Button onClick={() => navigate(`/login/${id}`)}>注冊</Button>
                        <Button onClick={() => navigate('/register')}>登入</Button>
                    </Button.Group>
            </div>
        </div>
    )
}      

　2. LInk

import React from "react";
import { Link } from 'react-router-dom'

export const ProductImage: React.FC<PropsType> = ({id=3, name }) => {
    return (
        <Link to={`/detail/${id}`}>
            xxxxxxx
        </Link>
    );
}      

那時候我隻有一台錄音機也沒有電腦 也不敢奢求說唱會讓自己的生活變好