摘要：react Router 6 相比 React Router 5 进行了一些重要的升级和改动，主要包括 API 的简化、性能优化和新的特性。以下是主要的区别和新增功能：
react Router 6 相比 React Router 5 进行了一些重要的升级和改动，主要包括 API 的简化、性能优化和新的特性。以下是主要的区别和新增功能：
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";;import { BrowserRouter as Router, Routes, Route } from "react-router-dom";} />} />;区别：
Switch 被 Routes 取代，Route 需要用 element 传递组件，而不是 component。;}>} />;区别：
6 版本支持嵌套路由，不需要手动拼接路径（/dashboard/profile），而是直接写 profile，这样 Profile 组件会在 Dashboard 组件中渲染 Outlet。import { useHistory } from "react-router-dom";const history = useHistory;history.push("/home");import { useNavigate } from "react-router-dom";const navigate = useNavigate;navigate("/home");区别：
useHistory 被 useNavigate 取代，push 变成了 navigate。区别：
React Router 6 新增 useRoutes，允许用数组方式定义路由：
import { useRoutes } from "react-router-dom";const routes = [{ path: "/home", element: },{ path: "/about", element: },];const App = => {return useRoutes(routes);};让路由更符合组件化思想，避免 JSX 层级嵌套过深。import { Redirect } from "react-router-dom";;import { Navigate } from "react-router-dom";} />;区别：
Redirect 被 Navigate 取代，必须用 element 传递。React Router 6 默认匹配完整路径，不需要 exact：
如果你的项目是 React Router 5，升级到 6 可能需要修改这些 API，但整体结构更简洁，代码可读性更好。
来源：八哥科技坊
