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

2024-01-07 17:35:17
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的理解。

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

文章来源:https://blog.csdn.net/weixin_45620943/article/details/135401455
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。