React Router v6 极简指南：解锁 React 应用路由新境界

你还在为 React 路由配置感到困惑吗？面对层出不穷的路由需求，你是否Yi经束手无策？别担心，React Router v6 来了！它为 React 应用提供了强大、灵活的路由解决方案，让你的应用瞬间拥有多页面导航的Neng力。

React Router 是 React 应用中Zui流行的路由库，它允许你在单页应用中实现多页面导航，保持 UI 与 URL 同步。当前主流版本是 v6，Ru果你还在用 v5，建议升级——v6 的 API geng简洁，思维模型也geng清晰。

你需要安装 react-router-dom 包：

npm install react-router-dom@6
# 或者
yarn add react-router-dom@6

然后在你的 React 应用中引入 BrowserRouter 并包裹整个应用，提供路由上下文：

import { BrowserRouter } from 'react-router-dom';
root.render(
  
    
  
);

Routes 是 v6 新增的容器，替代了 v5 的 Switch。Route 定义路径与组件的映射。例如：

import { Routes, Route } from 'react-router-dom';
function App {
  return (
    
      } />
      } />
    
  );
}

用冒号 :id 定义动态段，在组件中通过 useParams 读取。例如：

} />
// UserProfile 组件内
import { useParams } from 'react-router-dom';
function UserProfile {
  const { userId } = useParams;
  // 根据 userId 请求数据...
}

不Neng用 的场景，使用 useNavigate。例如：

import { useNavigate } from 'react-router-dom';
function LoginButton {
  const navigate = useNavigate;
  const handleLogin = async  => {
    await loginApi;
    navigate; // 普通跳转
    // navigate; // 返回上一页
  };
  return 登录;
}

v6 没有内置的 useQuery，推荐用浏览器原生的 URLSearchParams 来处理。例如：

import { useSearchParams } from 'react-router-dom';
function SearchPage {
  const  = useSearchParams;
  const keyword = searchParams.get || '';
  const updateKeyword =  => {
    setSearchParams;
  };
  // ...
}

v6 的嵌套路由不需要再写一大堆 /*,直接嵌套 .即可。父组件使用.来渲染子路由。例如:

// 定义路由<Routes>
<Route path="/dashboard" element={<Dashboard />}>
    <Route path="stats" element={<Stats />} />
    <Route path="settings" element={<Settings />} />
</Route>
</Routes>
// Dashboard 组件
function Dashboard {
return (
<div>
      <h1>控制台/h1
      <:nav.。./nav.〉
      <:Outlet/.〉 {/* 子由的内容会显示在这里*/}
    . div.〉
);
}

.

.掌握以上内容,你就Neng应对%的实际项目需求。当需要geng高级特性时,再去查阅官方文档,你会发现自己Yi经有扎实的底子去理解它们了。

希望这篇文章Neng帮助你快速掌握 React Router v6 的核心用法,让你的 React 应用瞬间拥有强大的路由功Neng！