当前位置：首页 > React

react如何拿到路由参数

2026-03-11 06:48:52React

获取路由参数的方法

在React中获取路由参数通常依赖于所使用的路由库。以下是两种常见路由库的获取方式：

使用React Router v5及以下版本

通过props.match.params获取动态路由参数：

react如何拿到路由参数

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

function UserPage(props) {
  const { id } = props.match.params; // 获取如/user/:id中的id
  return <div>User ID: {id}</div>;
}

<Route path="/user/:id" component={UserPage} />

通过useParams钩子（函数组件）：

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

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

使用React Router v6

v6版本中useParams是主要API：

react如何拿到路由参数

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

function ProductPage() {
  const { productId } = useParams(); // 匹配路由如/product/:productId
  return <div>Product ID: {productId}</div>;
}

获取查询参数（URLSearchParams）

通过useLocation获取查询字符串：

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

function SearchPage() {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const keyword = queryParams.get('q');

  return <div>Search Keyword: {keyword}</div>;
}

类组件中获取参数

对于类组件，可通过withRouter高阶组件：

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

class ProfilePage extends React.Component {
  render() {
    const { username } = this.props.match.params;
    return <div>Username: {username}</div>;
  }
}

export default withRouter(ProfilePage);