【React】react-router-dom中的HashRouter和BrowserRouter实现原理

古狼_guwolf

已于 2024-01-05 11:52:40 修改

阅读量1.7k

点赞数 28

分类专栏：前端开发文章标签： react.js javascript ecmascript

于 2024-01-05 11:52:22 首次发布

本文链接：https://blog.csdn.net/weixin_45620943/article/details/135401455

版权

前端开发专栏收录该内容

53 篇文章 2 订阅

订阅专栏

1. 前言

在之前整理BOM的五个对象时，提到：

location.hash发生改变后，会触发hashchange事件，且history栈中会增加一条记录，但页面不会重新加载——实现HashRouter的关键
history.pushState(state, '', URL)执行后，history栈中会增加一条记录，但页面不会重新加载，回退（history.back()或history.go(-1)）会触发popstate事件，location.pathname发生改变——实现BrowserRouter的关键

本篇通过举例方式详细描述实现的过程。

2. HashRouter的原理

2.1 原理要点

通过<a>元素href属性修改URL的hash值（或location.hash='#/xxx'修改，或前进后退修改）；
location.hash发生改变，页面不会重新加载；
location.hash发生改变，URL也会改变（hash是URL的一部分），新URL被推入history栈中；
location.hash发生改变，会触发window的hashchange事件；
通过给window.onhashchange绑定事件处理函数，监听hash变化，根据hash值选择渲染的组件。

注：根据hash值变化渲染组件，不会影响hash原有作为锚点的功能（锚点功能：根据#后面字符串滚动到对应id的元素）

2.2 示例源码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hash Router</title>
    </head>
    <body>
        <a href="#/user">Go user</a>
        <a href="#/info">Go info</a>
        <div id="root"></div>
        <!-- <div style="height: 600px;"></div>
        <div id="/info"></div> -->
        <script>
            let root = document.getElementById('root');
            window.onhashchange = function(event) {
                if(window.location.hash === '#/user') {
                    root.innerHTML = `
                        <label>
                            用户名：
                            <input value="小明" placeholder="user name"/>
                        </label>
                    `;
                } else {
                    root.innerHTML = `
                        <label>
                            年龄：13岁
                        </label>
                    `;
                }
            }
        </script>
    </body>
</html>

3. BrowserRouter的原理

3.1 原理要点

window不支持onpushstate事件，需要为window构造onpushstate事件，并绑定事件处理函数，重写history.pushState，保证执行history.pushState就会触发onpushstate事件；
可以为菜单项绑定click事件处理函数，执行重写的history.pushState(state,title,url)修改URL；
执行重写的history.pushState，页面不会重新加载，但location.pathname发生改变，并触发window的onpushstate事件；
通过window.onpushstate的事件处理函数，监听pathname变化，根据pathname值选择渲染的组件；
前进和后退会改变URL，页面不会重新加载，location.pathname发生改变，并触发window的onpopstate事件；
通过window.onpopstate绑定的事件处理函数，监听pathname变化，根据pathname值选择渲染的组件。

3.2 示例源码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hash Router</title>
    </head>
    <body>
        <div id="root"></div>

        <script>
            let root = document.getElementById('root');
            
            window.onpushstate = function(state, title, url) {
                console.dir({
                    type: 'onpushstate', 
                    state, 
                    pathname: url
                });
                render(url);
            }
            // 修改history.pushState方法，将window.onpushstate事件绑入
            bindPushstate(window.history);

            function bindPushstate(history) {
                let pushState = history.pushState;
                history.pushState = function(state, title, url) {
                    if(typeof window.onpushstate === 'function') {
                        window.onpushstate(state, title, url);
                    }
                    return pushState.apply(history, arguments);
                }
            }            
            
            window.onpopstate = function(event) {
                const pathname = window.location.pathname;
                console.dir({
                    type: event.type, 
                    state: event.state,
                    pathname
                });
                
                render(pathname);
            }

            function render(pathname) {
                if(pathname === '/user') {
                    root.innerHTML = `
                        <label>
                            用户名：
                            <input value="小明" placeholder="user name"/>
                        </label>
                    `;
                } else if(pathname === '/info') {
                    root.innerHTML = `
                        <label>
                            年龄：13岁
                        </label>
                    `;
                } else {
                    root.innerHTML = `
                        <label>
                            需要填写个人信息
                        </label>
                    `;
                }
            }

            setTimeout(() => {
                window.history.pushState({ page: 1 }, 'user', '/user');
            }, 2000);

            setTimeout(() => {
                window.history.pushState({ page: 2 }, 'info', '/info');
            }, 4000);

            setTimeout(() => {
                window.history.pushState({ page: 3 }, 'help', '/help');
            }, 6000);

        </script>
    </body>
</html>

4. 总结

再牛的建筑都离不开一块一块砖瓦，学到很多高大上的框架和上层API时，再回过头来看基础，会更加深对框架和上层API的理解。

注：以上，如有不合理之处，还请帮忙指出，大家一起交流学习~

古狼_guwolf

关注

28
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
【React】react-router-dom中的HashRouter和BrowserRouter实现原理

在之前整理BOM的五个对象location.hash发生改变后，会触发hashchange事件，且history栈中会增加一条记录，但页面不会重新加载——实现HashRouter的关键URL)执行后，history栈中会增加一条记录，但页面不会重新加载，回退（history.back()或history.go(-1)）会触发popstate事件，location.pathname发生改变——实现BrowserRouter的关键本篇通过举例方式详细描述实现的过程。
复制链接

扫一扫

专栏目录