React路由跳转及传参详解:

一 、React Router v6路由跳转方式

1. 使用 useNavigate Hook (推荐)

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

function MyComponent() {
  const navigate = useNavigate();
  
  const handleClick = () => {
    // 基本跳转
    navigate('/target-path');
    
    // 带参数跳转
    navigate('/target-path', { 
      state: { id: 123, name: 'example' } 
    });
    
    // 替换当前路由而不是添加历史记录
    navigate('/target-path', { replace: true });
    
    // 前进/后退
    navigate(1);  // 前进
    navigate(-1); // 后退
  };
  
  return 跳转;
}

2. 使用  组件

import { Link } from 'react-router-dom';

// 基本跳转
跳转

// 带state参数

  跳转


// 带查询参数
跳转

3. 使用  组件 (带激活状态)

import { NavLink } from 'react-router-dom';

 isActive ? 'active' : ''}
>

二 、路由参数传递方式

1. URL 参数 (动态路由)

定义路由:
} />

跳转:
navigate('/user/123');
// 或
用户

获取参数:
import { useParams } from 'react-router-dom';

function UserPage() {
  const { id } = useParams();
  return 
User ID: {id}
;
}

2. 查询参数 (search/query)

跳转:
navigate('/search?query=react&page=1');
// 或
搜索

获取参数:
import { useSearchParams } from 'react-router-dom';

function SearchPage() {
  const [searchParams, setSearchParams] = useSearchParams();
  const query = searchParams.get('query');
  const page = searchParams.get('page') || 1;
  
  return 
搜索: {query}, 页码: {page}
;
}

3. State 参数

跳转:
navigate('/target', { 
  state: { from: 'home', data: { /*...*/ } } 
});
// 或
跳转

获取参数:
import { useLocation } from 'react-router-dom';

function TargetPage() {
  const location = useLocation();
  const { from, data } = location.state || {};
  
  return 
来自: {from}
;
}

三 、React Router v5 路由跳转方式

1. 使用 useHistory Hook

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

function MyComponent() {
  const history = useHistory();
  
  const handleClick = () => {
    // 基本跳转
    history.push('/target-path');
    
    // 带参数跳转
    history.push({
      pathname: '/target-path',
      state: { id: 123 }
    });
    
    // 替换当前路由
    history.replace('/target-path');
  };
  
  return 跳转;
}

2. 其他方式与 v6 类似

v5 中的 , , 参数传递方式与 v6 类似，只是部分 API 名称不同。

四 、注意事项

1. state 参数：不会显示在 URL 中，刷新页面后会丢失，适合临时数据

2. URL 参数：适合标识资源，如用户ID、文章ID等

3. 查询参数：适合过滤、分页等可选的参数

4. 路由保护：结合路由守卫实现权限控制

5. v5 与 v6 区别：v6 使用 useNavigate 替代了 v5 的 useHistory