react路由5和6新增及区别

React Router 6 相比 React Router 5 进行了一些重要的升级和改动，主要包括 API 的简化、性能优化和新的特性。以下是主要的区别和新增功能：

1. 路由声明方式变化

React Router 5:

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

<Router>
  <Switch>
    <Route path="/home" component={Home} />
    <Route path="/about" component={About} />
  </Switch>
</Router>;

React Router 6:

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

<Router>
  <Routes>
    <Route path="/home" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</Router>;

区别：

• Switch 被 Routes 取代，Route 需要用 element 传递组件，而不是 component。

2. 默认启用嵌套路由

React Router 5:

<Router>
  <Route path="/dashboard" component={Dashboard} />
  <Route path="/dashboard/profile" component={Profile} />
</Router>;

React Router 6（嵌套路由）:

<Routes>
  <Route path="/dashboard" element={<Dashboard />}>
    <Route path="profile" element={<Profile />} />
  </Route>
</Routes>;

区别：

• 6 版本支持嵌套路由，不需要手动拼接路径（/dashboard/profile），而是直接写 profile，这样 Profile 组件会在 Dashboard 组件中渲染 Outlet。

3. useNavigate 取代 useHistory

React Router 5:

import { useHistory } from "react-router-dom";

const history = useHistory();
history.push("/home");

React Router 6:

import { useNavigate } from "react-router-dom";

const navigate = useNavigate();
navigate("/home");

区别：

• useHistory 被 useNavigate 取代，push 变成了 navigate。

4. 动态参数 match 变化

React Router 5:

<Route path="/user/:id" component={User} />
const { id } = match.params;

React Router 6:

<Route path="/user/:id" element={<User />} />
const { id } = useParams();

区别：

• match.params 被 useParams() 取代，直接在组件内获取动态参数。

5. useRoutes 方式配置路由

React Router 6 新增 useRoutes()，允许用数组方式定义路由：

import { useRoutes } from "react-router-dom";

const routes = [
  { path: "/home", element: <Home /> },
  { path: "/about", element: <About /> },
];

const App = () => {
  return useRoutes(routes);
};

优点：

• 让路由更符合组件化思想，避免 JSX 层级嵌套过深。

6. redirect 变更为 Navigate

React Router 5:

import { Redirect } from "react-router-dom";

<Route path="/" exact>
  <Redirect to="/home" />
</Route>;

React Router 6:

import { Navigate } from "react-router-dom";

<Route path="/" element={<Navigate to="/home" />} />;

区别：

• Redirect 被 Navigate 取代，必须用 element 传递。

7. exact 默认行为

React Router 6 默认匹配完整路径，不需要 exact：

React Router 5:

<Route path="/home" exact component={Home} />

React Router 6:

<Route path="/home" element={<Home />} />

总结：

如果你的项目是 React Router 5，升级到 6 可能需要修改这些 API，但整体结构更简洁，代码可读性更好。