React Router奇幻漂流记：懒加载、鉴权与404大冒险

前言：SPA王国的奇妙旅程

想象一下，你是一位城市规划师，负责建设一座名为"单页面应用（SPA）"的未来城市。在这座城市里，居民（用户）可以自由穿梭于各个区域（页面）而无需重新通关安检（页面刷新）。听起来很酷对吧？但问题来了：如何让居民快速到达目的地？如何保护重要区域？如何应对迷路的探险家？今天，就让我们一起踏上React Router的奇幻漂流之旅，探索SPA王国的奇妙世界！

第一章：懒加载的魔法------城市按需建造术

在传统的城市（多页面应用）中，每次访问新区域都需要重新建造整座城市，效率低下。而在我们的SPA王国，我们使用懒加载魔法，按需建造各个区域：

const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));

这就像在城市中设置了魔法传送门：

• 当居民前往/区域时，才启动建造Home区
• 当有人访问/about时，才召唤About区的建筑师
• 其他区域保持"未建造"状态，节省城市资源

但魔法需要时间施展！于是我们请出了悬念法师（Suspense）：

<Suspense fallback={<div>加载中...</div>}>
  <Routes>
    {/* 各种路由区域 */}
  </Routes>
</Suspense>

当居民站在传送门前等待时，悬念法师会变出一个"加载中..."的魔法告示牌，让等待不再枯燥。就像外卖小哥说"还有5分钟到"一样贴心！

我们在Home和About添加了一个简单的打印，可以看到只有我们访问某个页面，具体的打印才会执行，这也就实现了我们的懒加载，只有需要的时候才会导入，执行

第二章：导航系统------城市交通指挥中心

再好的城市也需要清晰的指路牌。我们的Navigation组件就是城市交通枢纽：

const Navigation = () => {
  return (
    <nav>
      <ul>
        <li><Link to='/'>Home</Link></li>
        <li><Link to='/About'>About</Link></li>
      </ul>
    </nav>
  )
}

这些<Link>组件就像是城市中的魔法飞路粉（哈利波特粉请举手🙋‍♂️），轻轻一点就能瞬间传送到目的地，而且不会触发整个城市的重建（页面刷新）。

其实<Link>都是我们老生常谈的用法了，我们在之前的文章🧭 React Router Dom：前端导航的魔法地图与探险指南 也提到了Link相比于a标签的好处，大家可以去看看，在这里我简单的说一下，Link不会白屏刷新，优化了性能不需要整个页面重新加载

第三章：守卫森严的支付城------鉴权大作战

每个城市都有需要特别保护的区域，比如存放金币的Pay城。我们派出了精英守卫------ProtectRoute组件：

import {
    useNavigate, // Navigate 组件 js 跳转
    useLocation,
} from 'react-router-dom'

const ProtectRoute = (props) => {
  const { children } = props
  const { pathname } = useLocation()
  const isLogin = localStorage.getItem('isLogin') === 'true'
  
  if (!isLogin) {
    return <Navigate to='/login' state={{ from: pathname }} />
  }
  return children
}

守卫的工作流程严谨如特工：

1. 检查访客的"通行证"（isLogin）
2. 若无通行证，立即遣送至登录城（Navigate组件）
3. 悄悄记下来访者原目的地（state），以便后续护送

在支付城的入口，我们设置了守卫岗哨：

<Route path='/pay' element={
  <ProtectRoute>
    <Pay />
  </ProtectRoute>
}>

现在，任何未经许可的访问者都会被重定向到登录城，就像试图进入复仇者基地的普通人会被弗瑞局长礼貌地请出去一样。<Navigate to='/login' state={{ from: pathname }} /> ，当我们不是登录状态没有权限的时候，他会直接把我们发送到登录页面，并且附带状态，const { pathname } = useLocation()这里useLocation()附带了很多页面信息，我们把当前页面的路径解构出来，发送通过<Navigate>附带状态传给登录页面

当我们访问pay时useLocation()会把我们的页面信息记录下来，我们拿到路径pathname,传给登录页，之后登录成功直接通过传过去的pathname实现跳转

第四章：登录城------身份认证中心

当未经授权的访客被送到登录城，他们需要证明自己的身份：

const Login = () => {
  const location = useLocation()
  const navigate = useNavigate()
  
  const handleSubmit = (e) => {
    e.preventDefault()
    if (username === 'admin' && password === '123456') {
      localStorage.setItem('isLogin', true)
      navigate(location?.state?.from)
    }
  }
  
  return (
    <form onSubmit={handleSubmit}>
      {/* 登录表单 */}
    </form>
  )
}

登录城就像银行的VIP认证室：

1. 访客填写"魔法契约"（表单）
2. 契约验证成功（admin/123456），发放数字通行证（localStorage）
3. 使用空间传送门（navigate）将访客送回原目的地

最妙的是location.state.from------守卫悄悄塞给登录城的小纸条，上面写着"这位访客原本想去支付城"。

我们来看一下效果，当我们访问pay，由于我们不是登录状态，把我们直接跳转到了login页面，当我们登录后又把我们跳转到pay

第五章：404区域------迷路者收容所

再好的城市规划也无法避免有人迷路。为此我们建立了404收容所：

const Notfound = () => {
  return <div>404</div>
}

// 在路由中设置
<Route path='*' element={<Notfound />} />

path='*'就像城市边缘的魔法结界，捕获所有未被识别的路径请求。当居民不小心走进死胡同，404收容所会温柔地提醒："朋友，你来到了未知领域！"

可以看到外面访问aaaaa这个不存在的路由，是会返回给我404的，具体的页面我们可以自己去实现，这只是一个思路

第六章：城市蓝图------核心架构解析

现在让我们看看整个城市的规划蓝图（App.jsx）：

function App() {
  return (
    <Router>
      <Navigation />
      <Suspense fallback={<div>加载中...</div>}>
        <Routes>
          <Route path='/' element={<Home />} />
          <Route path='/about' element={<About />} />
          <Route path='/login' element={<Login />} />
          <Route path='/pay' element={
            <ProtectRoute>
              <Pay />
            </ProtectRoute>
          } />
          <Route path='*' element={<Notfound />} />
        </Routes>
      </Suspense>
    </Router>
  )
}

这个架构的精妙之处在于：

1. Router：整个城市的空间管理器
2. Routes + Route：区域划分地图
3. 懒加载 + Suspense：按需建造系统
4. ProtectRoute：重点区域安保系统
5. *路径：城市边界防护网

看着十分简单，但是已经实现了构建前端路由的思路

技术亮点回顾：SPA城市的五大奇迹

1. 懒加载魔法

   • 使用lazy(() => import())按需加载组件
   • Suspense提供加载过渡效果
   • 减少初始加载时间，提升用户体验

2. 路由导航系统

   • <Link>实现无刷新导航
   • <Routes>和<Route>定义路径映射
   • 嵌套路由支持复杂布局

3. 鉴权守卫机制

   • ProtectRoute组件封装保护逻辑
   • 使用localStorage存储认证状态
   • 重定向时保留原始目标路径

4. 编程式导航

   • useNavigate实现JS跳转
   • useLocation获取路由信息
   • 登录后自动跳转回原页面

5. 404处理

   • path="*"捕获所有未匹配路径
   • 提供友好的错误提示
   • 防止用户进入未知区域

结语：构建你的SPA王国

经过这次奇幻漂流，我们已经掌握了构建现代SPA城市的核心技术。React Router就像城市的交通网络，连接各个功能区域；懒加载是按需建造的魔法；鉴权守卫是保护重要区域的防线；而404页面则是给迷路者的温柔提醒。

记住，一个好的SPA城市应该：

• 快速响应（懒加载）
• 导航清晰（路由系统）
• 安全可靠（鉴权保护）
• 包容错误（404处理）

现在，拿起你的魔法杖（键盘），开始构建属于你的SPA王国吧！当用户在你的应用中流畅穿梭时，他们会像体验了魔法世界一样惊叹不已------而这，就是前端开发的魅力所在！