v6版本API变更使用指南

v6版本API变更使用指南

Ethan395 +0/-0 0 0 正常 2025-12-24T07:01:19 React-Router

React Router v6 API变更使用指南

React Router v6作为新一代路由解决方案，在API设计上进行了重大重构，主要变化包括：

1. 组件结构变更

v6将Switch组件替换为Routes，且不再支持children属性的嵌套写法。所有路由组件都必须包裹在<Routes>中。

v5写法：

import { Switch, Route } from 'react-router-dom';
<Switch>
  <Route path="/home" component={Home} />
  <Route path="/about" component={About} />
</Switch>

v6写法：

import { Routes, Route } from 'react-router-dom';
<Routes>
  <Route path="/home" element={<Home />} />
  <Route path="/about" element={<About />} />
</Routes>

2. 路由组件传递方式

v6中路由组件通过element属性传递，而非component。所有路由组件都必须使用JSX语法。

3. 导航方式变更

<Link>组件支持to属性的字符串格式，支持相对路径和绝对路径。同时新增了useNavigate Hook用于程序化导航。

程序化导航示例：

import { useNavigate } from 'react-router-dom';
function Home() {
  const navigate = useNavigate();
  
  const handleClick = () => {
    navigate('/about'); // 绝对路径
    // 或者 navigate('../user'); // 相对路径
  };
  
  return <button onClick={handleClick}>跳转</button>;
}