老实说前端开发这行当，变化快得让人有时候想抓抓头发。昨天还在用的API，今天可Neng就被标记为“Deprecated”了。特别是React生态圈，路由作为单页应用的灵魂，它的每一次版本迭代dou牵动着无数开发者的心。这不React Router v6来了带着一堆破坏性的geng新和geng强大的功Neng。hen多刚入门的朋友，或者从v5转过来的老手，心里可Nengdou在打鼓：这玩意儿难学吗？之前的代码是不是全得废了？别急，咱们今天不整那些虚头巴脑的学术定义，就聊聊这React Router v6到底是个什么鬼，以及为什么你的React项目离不开它。

在开始敲代码之前，咱们得先达成一个共识：现代Web应用和十年前的网站，在体验上Yi经是两个物种了。Ru果你还在用传统的多页应用思维去构建React应用，那用户大概率会跑得比兔子还快。

想象一下你正在读一本厚厚的实体书。每一页dou是一个独立的HTML文件。当你想要kan下一章时你得亲手把当前这页撕掉，然后跑到图书馆去取下一张纸。在这个过程中，你的视线会经历短暂的空白，屏幕会闪烁一下这就是我们常说的“白屏”。

在技术层面每次点击链接，浏览器dou会向服务器发起一个全新的请求。服务器呢，乖乖地重新渲染一整套HTML，连带着CSS、JS全部重新加载一遍。这就像是你去餐厅点菜，哪怕只是想加双筷子，服务员也让你把整桌菜dou退了重新上一遍。效率低不说体验geng是断层严重，用户kan着那个转圈圈的加载图标，心里那个急啊。

这时候，React Router闪亮登场了。它把Web应用从“翻书”变成了“放PPT”或者“kan电影”。

在这个模式下你的浏览器窗口就像是一块固定的投影幕布。这块幕布本身是不动的，它始终挂在那里。当你点击导航栏的“首页”或者“关于我们”时React Router就像那个坐在放映机后面的操作员。它并没有把幕布拆了重建，而是极其丝滑地把当前的那张幻灯片抽走，瞬间换上了下一张。

幕布没变，只有内容在变。 这种体验就像原生App一样流畅，没有白屏，没有漫长的等待，整个页面重载的过程被彻底消灭了。这就是所谓的无感切换 。对于用户来说这种流畅度的提升是质的飞跃，直接决定了你的产品kan起来是“高大上”还是“上个世纪的产物”。

kan到这里有些较真的朋友可Neng会问了：“既然只是换组件显示，我自己在根组件里写几个if-else判断，或者用一个state变量来控制当前显示哪个组件，不也行吗？为什么非得引入一个路由库？”

嘿，这问题问得好。Ru果你只是写一个从来不分享链接、不需要用户收藏夹、不需要后退按钮的极其简单的内部Demo，那你确实Ke以用if-else搞定。但只要你的应用稍微复杂那么一点点，React Router的存在就是刚需，因为它解决了一个核心问题：URL 也就是地图 。

React RouterZui伟大的地方在于，它帮你保持了UI 和 URL 的同步。这意味着，你kan到的界面状态，必须和浏览器地址栏里的URL是一一对应的。

试想一下Ru果没有路由，你用state控制页面跳转。用户在浏览到某个精彩商品详情页时想复制链接发给朋友。结果呢？他复制下来的永远是那个“www.example.com”的首页链接，因为地址栏根本没变过！朋友点开一kan，一脸懵逼：“你让我kan的商品在哪？”

有了React Router，这种情况就不复存在了。每一个视图状态dou有其唯一的URL标识。你Ke以分享链接，Ke以收藏页面甚至Ke以在页面刷新后依然停留在当前的内容上，而不是被无情地扔回首页。

除了URL同步，React Router还默默干了一件大事：历史记录管理 。

它自动帮你处理了浏览器的“后退”和“前进”按钮。你想想，在单页应用里页面并没有真的跳转，Ru果路由库不介入，你点浏览器的后退按钮，浏览器会一脸懵逼地以为你要退出这个网站，直接把你关掉。那用户绝对会抓狂的。

React Router利用了HTML5 History API，在内部维护了一个栈。每当你跳转一个页面它就往栈里压一个状态。当你点后退时它就弹出一个状态，并精准地把对应的组件渲染出来。这种对浏览器原生行为的模拟，让Web应用用起来和原生软件几乎没区别。

好了概念吹得差不多了咱们得来点真格的。本文基于 React Router v6 编写，那些v5的老语法Yi经被扔进历史的垃圾堆了咱们只kanZui新的、Zui潮的写法。请放心食用，味道好得hen。

你得把这家伙请进你的项目里。现在的安装命令简单粗暴：

npm install react-router-dom

装好之后第一步就是要在你的应用Zui外层包裹一个Router。通常我们用的是BrowserRouter，它利用了HTML5的history API。

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
function App {
  return (
    
      {/* 这里放路由配置 */}
    
  );
}

v6Zui大的变化之一，就是用`Routes`替代了v5的`Switch`。而且，现在的路由匹配机制变得geng智Neng了它默认是支持“相对路由”匹配的，而且只渲染匹配到的第一个Zui佳路径。

function App {
  return (
    
      
        } />
        } />
        } />
      
    
  );
}

kan到那个`element`属性了吗？在v5里我们用的是`component`，现在改成了`element={}`。这种写法虽然多敲了几个字符，但灵活性大大增强，你Ke以直接往里面传props，甚至包裹一些高阶组件，这在v5里可是件麻烦事。

有了路由配置，用户怎么跳转呢？千万别用``标签！用了它，你的页面就刷新了前功尽弃。我们要用的是`Link`。

import { Link } from 'react-router-dom';
function Navbar {
  return (
    
  );
}

import { Outlet } from 'react-router-dom';
function App {
  return (
    
      }>
        } />
        } />
      
    
  );
}
function Layout {
  return (
    

      {/* 这里会渲染子路由的内容 */}
      
    
  );
}

import { useNavigate } from 'react-router-dom';
function Login {
  const navigate = useNavigate;
  const handleLogin =  => {
    // 登录逻辑...
    // 登录成功，跳转首页
    navigate;
  };
  return 登录
}

} />