前端路由革命：从"爬楼梯"到"坐电梯"的奇妙之旅

我想说一句
75 阅读5分钟

各位前端探险家们，今天我们一起探索了前端开发的"时空隧道"——路由系统！就像给网站装上了"任意门"，让我们在页面间穿梭时再也不用忍受"闪现"的痛苦了。准备好和我一起踏上这场奇妙的旅程了吗？

注：本篇文章是连载着 🧭 React Router Dom：前端导航的魔法地图与探险指南 感兴趣的可以看看

第一章：传统页面的"爬楼梯时代"

想象一下，你要从1楼到5楼，但每次只能爬楼梯（1.html和2.html就是这样的老式楼梯）：

<!-- 传统多页面应用就像爬楼梯 -->
<nav>
  <ul>
    <li><a href="./1.html">Page 1</a></li>
    <li><a href="./2.html">Page 2</a></li>
  </ul>
</nav>

每次点击链接，就像：

  1. 先回到1楼大厅（白屏等待）
  2. 重新爬楼梯（加载新页面）
  3. 到达新楼层（完整渲染）

这种体验就像穿着高跟鞋爬帝国大厦——每次切换页面都让人眼前一黑（字面意思的白屏）。更糟的是，公共区域（比如导航栏）每次都要重新加载，就像每次换楼层都要重新装修大厅！大大地增加了性能地消耗

而且很多共同的部分我们需要重复写，不能封装使用，给程序员和用户的体验都十分不好，可谓引起“公愤” 7.gif

痛点总结：

  • 页面完全刷新 → 用户体验割裂
  • 重复加载资源 → 效率低下
  • 状态丢失 → 像金鱼一样只有7秒记忆

第二章：SPA的"电梯革命"

在革命之前，我们当然已经知道了“封建王朝”的各式各样的缺点，那我们要怎么推翻它呢？我们可以实现我们的页面更新只需要局部的热更新

我们想一想，是不是原先就要锚链接这样一个功能，能帮我跳到我们的页面内容，不会有刷新的一面

   <!-- 锚链接 -->
    <a name="top"></a>
    <h1>Navigation</h1>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
    <div id="content-container" class="content">
        Welcome,click on the links above to navigate
    </div>
    <div class="box" style="height: 200vh;">

    </div>
    <a href="#top">回到顶部</a>

9.gif

那我们要怎么获取url中的#top？这时候我们的window.location.hash派上了用场，它可以帮我们获取我们的锚点，废话不多说，我们直接上代码，看效果

const content = document.getElementById('content-container');
        window.addEventListener('hashchange', function () {
            // console.log(window.location.hash);

            switch (window.location.hash) {
                case '#home':
                    content.innerHTML = `<h2>Home</h2><p>Welcome to our homepage</p>`
                    break;
                case '#about':
                    content.innerHTML = `<h2>About</h2><p>Welcome to our aboutpage</p>`
                    break;
                case '#contact':
                    content.innerHTML = `<h2>Contact</h2><p>Welcome to our contactpage</p>`
                    break;
                default:
                    break;
            }
        })

可以看到，我们是不需要重复写我们的公共部分，直接通过JS来修改不同锚点所匹配的内容，也不会产生页面的闪烁，解决我们困恼 10.gif

第三章：React Router - 智能电梯控制系统

现在，让我们看看现代SPA的终极形态——React Router（App.jsx展示了这套先进系统）：

<Router>
  {/* 电梯按钮面板 */}
  <nav>
    <ul>
      <li><Link to="/">Home</Link></li> {/* 1楼按钮 */}
      <li><Link to="/about">About</Link></li> {/* 2楼按钮 */}
    </ul>
  </nav>
  
  {/* 电梯轿厢 - 显示当前楼层 */}
  <Routes>
    <Route path='/' element={<Home />} /> {/* 1楼房间 */}
    <Route path='/about' element={<About />} /> {/* 2楼房间 */}
  </Routes>
</Router>

核心组件揭秘：

  1. <Router>  - 整栋大楼的电梯井

    • 提供路由运行的基础环境
    • 相当于电梯的竖井结构

我们的公共部分需要写在<Router>里面否则会报错喔！

  1. <Link>  - 魔法电梯按钮

    <Link to="/about">About</Link>
    • 表面像普通按钮，实则是"幻影移形"通道
    • 点击后：URL改变但页面不刷新 → 像幻影显形

在react中我们用Link代替a，让用户有更好的体验，不会有白屏的出现

  1. <Routes>  - 智能楼层调度系统

    <Routes>
  <Route path="/" element={<Home/>} />
  <Route path="/about" element={<About/>} />
</Routes>
    • 根据URL自动匹配对应"房间"
    • 像电梯自动停在正确楼层

就像一个管理员，管理着不同的路由

  1. <Route>  - 可配置的房间门牌

    <Route path="/about" element={<About/>} />
    • 定义URL路径与组件的映射关系
    • 相当于"8楼 ↔ 总裁办公室"的对应表

不同的path匹配不同的内容，显示不同的内容,有点像我们在原生JS通过window.location.hash来匹配不同的内容

我们来看最终效果：

11.gif

第四章：路由模式大比拼 - 电梯VS魔毯

1. Hash模式 - 老式电梯

https://example.com/#/about

  • 原理：利用URL的hash（#后的部分）

  • 特点：

    • 兼容性好（连IE爷爷都支持）
    • 像老式电梯：稳定但有点吵（URL中有#）
    • 改变hash不会触发页面刷新

2. History模式 - 磁悬浮魔毯

https://example.com/about

  • 原理：使用HTML5 History API

  • 特点：

    • URL干净美观（无#）
    • 需要服务器配合（否则直接访问子路由会404）
    • 像磁悬浮列车：先进但需要专用轨道

趣味比喻：

  • Hash模式 → 带安全绳的攀岩
  • History模式 → 无保护措施的走钢丝
  • <Link>组件 → 给你系上安全绳的教练

第五章：SPA的超级力量

为什么SPA像吃了菠菜的大力水手？

  1. 闪电切换
    组件加载速度比传统页面快10倍，就像电梯vs楼梯

  2. 状态保持
    登录状态、表单数据等全程保持，像VIP电梯记住你的偏好

  3. 原生体验
    接近手机App的流畅度，告别"闪烁症候群"

  4. 按需加载
    像智能电梯只启动目标楼层，不浪费资源

image.png

第六章：路由原理探秘 - 魔法背后的科学

1. 路由监听器 - 24小时待命的门卫

// 守候hash变化的门卫
window.addEventListener('hashchange', () => {
  console.log('检测到hash变化！', location.hash);
});

2. 路由匹配器 - 最强大脑导航仪

<Routes>
  <Route path="/user/:id" element={<Profile/>} />
</Routes>
  • :id 相当于通配符，能匹配 /user/123 或 /user/elonmusk
  • 像万能钥匙打开所有匹配的门

简单来说就是动态参数，输任何内容都会匹配到这个页面，后续需要筛选，我们有该用户才会显示页面

3. 组件渲染 - 变形金刚变身

<Route path="/dashboard" element={<Dashboard/>} />
  • 当URL匹配时，<Dashboard>组件会神奇地出现在<Routes>区域
  • 像魔术师把鸽子变成兔子

结语：路由改变世界

今天我们见证了前端开发从"爬楼梯时代"到"坐电梯时代"的革命性转变。React Router就像给我们的应用装上了哈利波特的飞路粉，让页面切换变成一场魔法体验。

记住这些奇妙比喻：

  • SPA → 整栋智能大厦
  • Router → 电梯控制系统
  • Routes → 楼层调度中心
  • Link → 魔法电梯按钮
  • Hash/History → 两种电梯型号

最后送大家一句路由开发箴言：

"优秀的开发者建造楼梯，伟大的开发者安装电梯。"

现在，去给你的应用装上光速电梯吧！当用户惊叹页面切换如丝般顺滑时，别忘了深藏功与名~ 🚀

image.png

avatar
文章
阅读
粉丝