当前位置：首页 > React

react动态路由如何传参

2026-01-25 14:42:25React

React 动态路由传参方法

在 React 中，动态路由传参主要通过路由库（如 React Router）实现，以下是常见方法：

使用 `useParams` 钩子（React Router v5+）

在路由配置中定义参数占位符，通过 useParams 获取参数值：

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

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

通过 `useLocation` 的 search 参数

适用于 URL 查询参数（?key=value）：

import { useLocation } from 'react-router-dom';
function SearchPage() {
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const query = searchParams.get('q');
  return <div>Search Query: {query}</div>;
}

通过 `useNavigate` 传递 state

导航时通过 state 传递对象参数（不会暴露在 URL 中）：

// 发送参数
import { useNavigate } from 'react-router-dom';
function Home() {
  const navigate = useNavigate();
  navigate('/profile', { state: { user: 'admin' } });
}

// 接收参数
import { useLocation } from 'react-router-dom';
function Profile() {
  const { state } = useLocation();
  return <div>User: {state.user}</div>;
}

类组件中的参数获取

对于类组件，可以通过 this.props.match.params 获取：

react动态路由如何传参

class Product extends React.Component {
  render() {
    const { id } = this.props.match.params;
    return <div>Product ID: {id}</div>;
  }
}
// 路由配置
<Route path="/product/:id" component={Product} />