你女友都懂前端路由和react-router實現原理了，你還不懂。

時樾1998發表於2020-03-17

前端路由React

在單頁面應用如日中天發展的過程中，備受關注的少了前端路由。

而且還經常會被xxx面試官問到，什麼是前端路由，它的原理的是什麼，它是怎麼實現，跳轉不重新整理頁面的...

一大堆為什麼，問你頭都大，此時，我就要拿出我珍藏的圖片了，各位觀眾，五個煙。?

前言

今天主要講的是：

原生js實現hashRouter
原生js實現historyRouter
react-router-dom的BrowserRouter
react-router-dom的HistoryRouter

四種路由的實現原理。

環境問題

因為等一下要用到h5新增的pushState() 方法，因為這玩(diao)意(mao)太矯情了，不支援在本地的file協議執行，不然就會報以下錯誤

只可以在http(s)協議 執行，這個坑本渣也是踩了很久，踩懷疑自己的性別。

既然用file協議 不行那就只能用webpack搭個簡陋壞境了，你也可以用阿帕奇，tomcat...啊狗啊貓之類的東西代理。

本渣用的是webpack環境，也方便等下講解react-router-dom的兩個路由的原理。環境的配置，我簡單的貼一下，這裡不講。如果你對webpack有興趣,可以看看本渣的這篇文章,寫得雖然不是很好，但足夠入門。

npm i webpack webpack-cli babel-loader @babel-core @babel/preset-env html-webpack-plugin webpack-dev-server -D
複製程式碼

webpack.config.js

const path = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {

    entry:path.resolve(__dirname,'./index.js'),

    output:{

        filename:'[name].[hash:6].js',

        path:path.resolve(__dirname,'../dist')

    },

    module:{

        rules:[
            {
                test:/\.js$/,

                exclude:/node_module/,

                use:[
                    {
                        loader:'babel-loader',
                        options:{
                            presets:['@babel/preset-env']
                        }
                    }
                ]
            }
        ]

    },

    plugins:[
        new HtmlWebpackPlugin({
            template:path.resolve(__dirname,'./public/index.html'),
            filename:'index.html'
        })
    ]

}
複製程式碼

package.json的script新增一條命令

    "dev":"webpack-dev-server --config ./src/webpack.config.js --open"
複製程式碼

專案目錄

執行

npm run dev
複製程式碼

現在所有東西都準備好了，我們可以進入主題了。

原生js實現hashRouter

html

<ul>
    <li><a href='#/home'>home</a></li>
    <li><a href='#/about'>about</a></li>
    <div id="routeView"></div>
</ul>
複製程式碼

window.addEventListener('DOMContentLoaded', onLoad)

window.addEventListener('hashchange', changeView)

let routeView = ''

function onLoad() {

    routeView = document.getElementById('routeView')

    changeView()

}

function changeView() {
    switch (location.hash) {
        case '#/home':
            routeView.innerHTML = 'home'
            break;
        case '#/about':
            routeView.innerHTML = 'about'
            break;
    }

}

複製程式碼

原生js實現hashRouter主要是監聽它的hashchange事件的變化，然後拿到對應的location.hash更新對應的檢視

原生js實現historyRouter

html

<ul>
    <li><a href='/home'>home</a></li>
    <li><a href='/about'>about</a></li>
    <div id="routeView"></div>
</ul>

複製程式碼

historyRoute

window.addEventListener('DOMContentLoaded', onLoad)

window.addEventListener('popstate', changeView)

let routeView = ''

function onLoad() {

    routeView = document.getElementById('routeView')

    changeView()

    let event = document.getElementsByTagName('ul')[0]
    
    event.addEventListener('click', (e) => {

        if(e.target.nodeName === 'A'){
            e.preventDefault()

            history.pushState(null, "", e.target.getAttribute('href'))
    
            changeView()
        }

    })
}

function changeView() {
    switch (location.pathname) {
        case '/home':
            routeView.innerHTML = 'home'
            break;
        case '/about':
            routeView.innerHTML = 'about'
            break;
    }

}
複製程式碼

能夠實現history路由跳轉不重新整理頁面得益與H5提供的pushState(),replaceState()等方法，這些方法都是也可以改變路由狀態（路徑），但不作頁面跳轉，我們可以通過location.pathname來顯示對應的檢視

react-router-dom

react-router-dom是react的路由，它幫助我們在專案中實現單頁面應用，它提供給我們兩種路由一種基於hash段實現的HashRouter，一種基於H5Api實現的BrowserRouter。

下面我們來簡單用一下。

如果你在用本渣以上提供給你的環境，還要配置一下，下面?這些東西，如果不是，請忽略。

npm i react react-dom react-router-dom @babel/preset-react -D
複製程式碼

webpack.config.js,在js的options配置加一個preset

將index.js改成這樣。

import React from 'react'

import ReactDom from 'react-dom'

import { BrowserRouter, Route, Link } from 'react-router-dom'

function App() {

    return (

        <BrowserRouter>
            <Link to='/home'>home</Link>
            <Link to='/about'>about</Link>
            <Route path='/home' render={()=><div>home</div>}></Route>
            <Route path='/about' render={()=><div>about</div>}></Route>
        </BrowserRouter>

    )
}

ReactDom.render(<App></App>,document.getElementById('root'))
複製程式碼

public/index.html

<div id="root"></div>

複製程式碼

平時我麼只知道去使用它們，但卻很少去考慮它是怎麼做到，所以導致我們一被問到，就會懵逼；今日如果你看完這篇文章，本渣promiss你不再只會用react-router，不再是它騎在你身上，而是你可以對它為所欲為。

react-router-dom的BrowserRouter實現

首先我們在index.js新建一個BrowserRouter.js檔案，我們來實現自己BrowserRouter。既然要實現BrowserRouter，那這個檔案就得有三個元件BrowserRouter,Route,Link。

好，現在我們把它殼定好來，讓我們來一個一個的弄*它們?

BrowserRouter元件

BrowserRouter元件主要做的是將當前的路徑往下傳，並監聽popstate事件,所以我們要用Consumer, Provider跨元件通訊，如果你不懂的話，可以看看本渣這遍文章，本渣例舉了react所有的通訊方式

const { Consumer, Provider } = React.createContext()

export class BrowserRouter extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            currentPath: this.getParams.bind(this)(window.location.pathname)
        }
    }


    onChangeView() {
        const currentPath = this.getParams.bind(this)(window.location.pathname)
        this.setState({ currentPath });
    };

    getParams(url) {
        return url
    }


    componentDidMount() {
        window.addEventListener("popstate", this.onChangeView.bind(this));
    }

    componentWillUnmount() {
        window.removeEventListener("popstate", this.onChangeView.bind(this));
    }

    render() {
        return (
            <Provider value={{ currentPath: this.state.currentPath, onChangeView: this.onChangeView.bind(this) }}>
                 <div>
                    {
                        React.Children.map(this.props.children, function (child) {

                            return child

                        })
                    }
                </div>
            </Provider>
        );
    }
}

複製程式碼

Rouer元件的實現

Router元件主要做的是通過BrowserRouter傳過來的當前值，與Route通過props傳進來的path對比，然後決定是否執行props傳進來的render函式

export class Route extends React.Component {

    constructor(props) {
        super(props)
    }

    render() {
        let { path, render } = this.props
        return (
            <Consumer>
                {({ currentPath }) => currentPath === path && render()}
            </Consumer>
        )
    }
}

複製程式碼

Link元件的實現

Link元件主要做的是，拿到prop,傳進來的to,通過PushState()改變路由狀態，然後拿到BrowserRouter傳過來的onChangeView手動重新整理檢視

export class Link extends React.Component {

    constructor(props){
        super(props)
    }

    render() {
        let { to, ...props } = this.props
        return (
            <Consumer>
                {({ onChangeView }) => (
                    <a
                        {...props}
                        onClick={e => {
                            e.preventDefault();
                            window.history.pushState(null, "", to);
                            onChangeView();
                        }}
                    />
                )}
            </Consumer>
        )

    }

}
複製程式碼

完整程式碼

import React from 'react'

const { Consumer, Provider } = React.createContext()

export class BrowserRouter extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            currentPath: this.getParams.bind(this)(window.location.pathname)
        }
    }


    onChangeView() {
        const currentPath = this.getParams.bind(this)(window.location.pathname)
        this.setState({ currentPath });
    };

    getParams(url) {
        return url
    }


    componentDidMount() {
        window.addEventListener("popstate", this.onChangeView.bind(this));
    }

    componentWillUnmount() {
        window.removeEventListener("popstate", this.onChangeView.bind(this));
    }

    render() {
        return (
            <Provider value={{ currentPath: this.state.currentPath, onChangeView: this.onChangeView.bind(this) }}>
                <div>
                    {
                        React.Children.map(this.props.children, function (child) {

                            return child

                        })
                    }
                </div>
            </Provider>
        );
    }
}

export class Route extends React.Component {

    constructor(props) {
        super(props)
    }

    render() {
        let { path, render } = this.props
        return (
            <Consumer>
                {({ currentPath }) => currentPath === path && render()}
            </Consumer>
        )
    }
}

export class Link extends React.Component {

    constructor(props){
        super(props)
    }

    render() {
        let { to, ...props } = this.props
        return (
            <Consumer>
                {({ onChangeView }) => (
                    <a
                        {...props}
                        onClick={e => {
                            e.preventDefault();
                            window.history.pushState(null, "", to);
                            onChangeView();
                        }}
                    />
                )}
            </Consumer>
        )

    }

}
複製程式碼

使用

把剛才在index.js使用的react-router-dom換成這個檔案路徑就OK。
複製程式碼

react-router-dom的hashRouter的實現

hashRouter就不一個一個元件的說了，跟BrowserRouter大同小異,直接貼完整程式碼了

import React from 'react'

let { Provider, Consumer } = React.createContext()

export class HashRouter extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            currentPath: this.getCurrentPath.bind(this)(window.location.href)
        }
    }

    componentDidMount() {
        window.addEventListener('hashchange', this.onChangeView.bind(this))
    }

    componentWillUnmount() {
        window.removeEventListener('hashchange')
    }

    onChangeView(e) {
        let currentPath = this.getCurrentPath.bind(this)(window.location.href)
        this.setState({ currentPath })
    }

    getCurrentPath(url) {
        
        let hashRoute = url.split('#')
        
        return hashRoute[1]
    }

    render() {

        return (

            <Provider value={{ currentPath: this.state.currentPath }}>
                <div>
                    {
                        React.Children.map(this.props.children, function (child) {

                            return child

                        })
                    }
                </div>
            </Provider>

        )

    }


}

export class Route extends React.Component {

    constructor(props) {
        super(props)
    }

    render() {

        let { path, render } = this.props

        return (
            <Consumer>
                {
                    (value) => {
                        console.log(value)
                        return (
                            value.currentPath === path && render()
                        )
                    }
                }
            </Consumer>
        )

    }

}

export class Link extends React.Component {

    constructor(props) {
        super(props)
    }

    render() {

        let { to, ...props } = this.props

        return <a href={'#' + to} {...props} />

    }

複製程式碼

前端路由實現與 react-router 原始碼分析
2016-06-12
前端路由React原始碼
看完這篇你不能再說不懂SSO原理了！
2023-02-17
只會玩VR遊戲？你還可以用虛擬現實向女友求婚
2018-03-01
VR遊戲
前端路由實現及 react-router v4 原始碼分析
2018-07-11
前端路由React原始碼
你還不懂 Tomcat 的優化嗎？
2020-05-25
Tomcat優化
rrweb 帶你還原問題現場
2022-01-06
Web
前端路由的原理和實現
2019-04-28
前端路由
HTML 屬性你都懂了嗎
2019-10-09
HTML
女友都懂系列之防抖與節流分析
2020-02-27
你還不懂java的日誌系統嗎
2022-02-12
Java
React 快速上手 – 07 前端路由 react-router
2019-03-04
React前端路由
React 快速上手 - 07 前端路由 react-router
2018-05-24
React前端路由
你真的瞭解前端路由嗎？
2019-03-04
前端路由
前端路由原理解析和實現
2019-05-13
前端路由
如果你不懂HTML，你連笑話都看不懂
2012-06-18
HTML
當網路女友碰到現實女友
2006-12-19
其實你不懂程式設計師
2012-03-26
程式設計師
面試官: 你瞭解前端路由嗎?
2018-04-09
面試前端路由
陣列容器(ArrayList)設計與Java實現，看完這個你不懂ArrayList，你找我！！！
2022-07-06
陣列Java
前端路由實現原理
2018-03-02
前端路由
為何你還不懂得如何使用Python協程
2019-05-05
Python
前端技術 | react-router，去中心化式路由
2019-05-08
前端React中心化路由
你根本不懂Javascript（3）：類和模組
2017-03-21
JavaScript
前端兩種路由實現和使用場景
2020-01-30
前端路由
花五分鐘看這篇之前，你才發現你不懂RESTful
2020-12-08
REST
前端路由的實現原理
2019-07-26
前端路由
前端路由實現原理（history）
2018-07-08
前端路由
大寫的服，看完這篇你還不懂RocketMQ算我輸
2020-09-25
MQ
萌新看過來，你還學不懂VScode外掛嗎？
2022-03-23
VSCode
論文都看不懂，你還搞什麼人工智慧？
2017-09-19
人工智慧
你知道前端是如何實現水印的嗎
2021-09-11
前端
如何實現一個react-router路由攔截（導航守衛）
2019-01-06
React路由
前端路由的實現(三) —— History的pushState和replaceState用法
2018-04-24
前端路由
你不懂技術，你想創業，你該這麼做
2013-04-01
創業
你前端都只是半桶水而已，你還敢問我怎麼學後端？
2022-01-21
前端後端
老司機帶你用go實現路由的鏈式定義
2020-08-22
Go路由
你也許不知道的Vuejs - 自定義路由實現
2018-05-04
VueJS路由
當你處理了幾千萬資料之後...
2020-09-23