当前位置：首页 > React

react的路由参数如何传递

2026-01-25 02:54:44React

路由参数传递方式

在React中，路由参数传递通常通过React Router库实现。以下是常见的几种方式：

URL路径参数（动态路由）

通过冒号:param在路由路径中定义参数，组件通过useParams获取：

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

// 组件内获取
import { useParams } from 'react-router-dom';
function UserPage() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}

查询参数（Query String）

通过URLSearchParams或第三方库如query-string解析：

// 链接跳转
<Link to="/search?keyword=react&page=1">Search</Link>

// 组件内获取
import { useLocation } from 'react-router-dom';
function SearchPage() {
  const location = useLocation();
  const params = new URLSearchParams(location.search);
  const keyword = params.get('keyword');
  return <div>Searching: {keyword}</div>;
}

状态参数（State）

通过state属性传递对象，不会暴露在URL中：

// 跳转时传递
<Link 
  to="/profile" 
  state={{ fromDashboard: true, userId: 123 }}
>
  Profile
</Link>

// 组件内获取
import { useLocation } from 'react-router-dom';
function Profile() {
  const { state } = useLocation();
  return <div>From Dashboard: {state?.fromDashboard}</div>;
}

编程式导航传递

通过useNavigate钩子实现：

import { useNavigate } from 'react-router-dom';
function NavigateButton() {
  const navigate = useNavigate();

  const handleClick = () => {
    // 路径参数
    navigate('/user/123');

    // 路径+查询参数
    navigate('/search?q=react');

    // 路径+状态
    navigate('/profile', { state: { user: 'admin' } });
  };

  return <button onClick={handleClick}>Navigate</button>;
}