11、react withRouter的原理與使用

高階組件中的withRouter, 作用是將一個組件包裹進Route里面, 然后react-router的三個對象history, location, match就會被放進這個組件的props屬性中.

作用：把不是通過路由切換過來的組件，將react-router 的 history、location、match 三個對象傳入組件的props對象上，使當前組件可受路由的控制。

 

默認情況下必須是經過路由匹配渲染的組件才存在this.props，才擁有路由參數，才能使用編程式導航的寫法，執行this.props.history.push('/detail')跳轉到對應路由的頁面

然而不是所有組件都直接與路由相連（通過路由跳轉到此組件）的，當這些組件需要路由參數時，使用withRouter就可以給此組件傳入路由參數，此時就可以使用this.props

 

比如app.js這個組件，一般是首頁，不是通過路由跳轉過來的，而是直接從瀏覽器中輸入地址打開的，如果不使用withRouter，則此組件的this.props為空，沒法執行props中的history、location、match等方法。

// withRouter實現原理: 
// 將組件包裹進 Route, 然后返回
// const withRouter = () => {
//     return () => {
//         return <Route component={Nav} />
//     }
// }

// 這里是簡化版
const withRouter = ( Component ) => () => <Route component={ Component }/>

上面是實現的原理, react-router-dom 里面是有這個組件的, 直接引入使用就可以了

import React from 'react'
import './nav.css'
import {
    NavLink,
    withRouter
} from "react-router-dom"

class Nav extends React.Component{
    handleClick = () => {
        // Route 的 三個對象將會被放進來, 對象里面的方法可以被調用
        console.log(this.props);
    }
    render() {
        return (
            <div className={'nav'}>
                <span className={'logo'} onClick={this.handleClick}>掘土社區</span>
                <li><NavLink to="/" exact>首頁</NavLink></li>
                <li><NavLink to="/activities">動態</NavLink></li>
                <li><NavLink to="/topic">話題</NavLink></li>
                <li><NavLink to="/login">登錄</NavLink></li>
            </div>
        );
    }
}

// 導出的是 withRouter(Nav) 函數執行
export default withRouter(Nav)

所以 withRouter的作用就是, 如果我們某個東西不是一個 Router, 但是我們要依靠它去跳轉一個頁面, 比如點擊頁面的 logo, 返回首頁, 這時候就可以使用 withRouter來做處理
在這個例子中, 我將 span使用 withRouter作為一個可點擊跳轉的 Link

參考

鏈接： https://www.cnblogs.com/luowenshuai/p/9526341.html
鏈接：https://www.jianshu.com/p/8d3cf411a639