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 <button onClick={handleClick}>跳转</button>;
}

2. 使用 <Link> 组件

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

// 基本跳转
<Link to="/target-path">跳转</Link>

// 带state参数
<Link 
  to="/target-path" 
  state={{ id: 123, name: 'example' }}
>
  跳转
</Link>

// 带查询参数
<Link to="/target-path?key=value&name=test">跳转</Link>

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

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

<NavLink 
  to="/target-path"
  className={({ isActive }) => isActive ? 'active' : ''}
>
</NavLink>

二 、路由参数传递方式

1. URL 参数 (动态路由)

定义路由:
<Route path="/user/:id" element={<UserPage />} />

跳转:
navigate('/user/123');
// 或
<Link to="/user/123">用户</Link>

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

function UserPage() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}

2. 查询参数 (search/query)

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

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

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

3. State 参数

跳转:
navigate('/target', { 
  state: { from: 'home', data: { /*...*/ } } 
});
// 或
<Link to="/target" state={{ from: 'home' }}>跳转</Link>

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

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

三 、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 <button onClick={handleClick}>跳转</button>;
}

2. 其他方式与 v6 类似

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

四 、注意事项

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

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

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

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

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