经常被问到的react-router实现原理详解

在单页面应用如日中天发展的过程中，备受关注的少了前端路由。

而且还经常会被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的两个路由的原理。环境的配置，我简单的贴一下，这里不讲。

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

现在所有东西都准备好了，我们可以进入主题了。参考React实战视频讲解：进入学习

原生js实现hashRouter

html

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

js

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=