当前位置：首页 > React

react页面如何接收路由跳转

2026-01-25 23:49:56React

路由跳转参数接收方法

在React中接收路由跳转参数主要依赖于所使用的路由库。以下是常见路由库（React Router v5/v6）的详细实现方法：

React Router v5 接收参数

URL路径参数接收 使用useParams钩子或match.params获取动态路由参数：

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

function UserPage() {
  const { userId } = useParams(); // 获取如 /users/:userId 的参数
  return <div>User ID: {userId}</div>;
}

查询参数接收 通过URLSearchParams解析查询字符串：

react页面如何接收路由跳转

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>;
}

state参数接收 通过location.state获取跳转时传递的状态：

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

function DetailPage() {
  const location = useLocation();
  const itemData = location.state?.item;
  return <div>{itemData?.name}</div>;
}

React Router v6 接收参数

路径参数接收 与v5类似但更严格，必须通过useParams：

react页面如何接收路由跳转

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

function ProductPage() {
  const { productId } = useParams();
  return <div>Product ID: {productId}</div>;
}

查询参数处理 推荐使用自定义hook或URLSearchParams：

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

function FilterPage() {
  const [searchParams] = useSearchParams();
  const color = searchParams.get('color');
  return <div>Selected Color: {color}</div>;
}

状态参数传递 通过useLocation的state属性：

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

function CheckoutPage() {
  const { state } = useLocation();
  return <div>Total Price: {state?.total}</div>;
}

类组件中的接收方式

对于类组件，可以通过withRouter高阶组件或this.props获取：

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

class ProfilePage extends React.Component {
  render() {
    const { match, location } = this.props;
    const username = match.params.username;
    return <div>{username}'s Profile</div>;
  }
}

export default withRouter(ProfilePage);