跳至主要內容

react-router路由

Mr.He大约 1 分钟

react-router路由

单页面应用之前，不存在前端路由这样的概念，一个页面对应一个url，跳转通过链接实现。

单页面流行之后，各种路由库逐渐增加，主要分：hash路由和history路由。

路由库主要作用是同步url与其监听函数。

  • hash路由：通过window.location修改hash，通过window.addEventListener('hashchange', callback) 添加监听函数

  • history路由：通过history.pushState修改url，通过window.addEventListener('popstate', callback)添加监听函数

1.hash路由

hash路由的缺点就是‘#’一直存在不美观，让人感觉像是Hack而非标准。优点是很多老IE版本也能很好的支持。

接下来手动实现一个hash路由：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>hash</title>
</head>
<body>
    <div id='div'>home</div>
    <a href="#/red">red</a>
    <a href="#/">home</a>
</body>
<script>
    
    const routes = {}
    let route = function (path, callback) {
        routes[path] = callback || function () {};
    }
    //绑定路由的回调函数
    route('/', function() { document.getElementById('div').innerText = 'home' })
    route('/red', function(){document.getElementById('div').innerText = 'red'})
    
    let refresh = function () {
        this.currentUrl = window.location.hash.slice(1) || '/';
        routes[this.currentUrl]();
    }
    window.addEventListener('hashchange', refresh, false)//监听url变化执行回调函数
</script>
</html>

这里是一个简单的路由实现。

参考资料： https://github.com/fi3ework/blog/issues/21

https://juejin.im/post/5ac61da66fb9a028c71eae1b

https://juejin.im/post/5b1b94e4e51d45069928f32a