本文共 2645 字，大约阅读时间需要 8 分钟。

React Router 路由参数处理指南

1. props.match.params

在 React Router 中，props.match.params 是一个常用的获取路由参数的方法。它能够直接从 URL 中提取路径参数，并将其作为组件的属性注入。

示例代码

import React from 'react';import { RouteConfigComponentProps } from 'react-router-config';interface IParam {  id?: string;}interface IProps extends RouteConfigComponentProps {} const Main = (props: IProps) => {  const { id } = props.match.params;  console.log('参数：', id);  return (    
   
          {id && 
    
当前ID: {id}
}    
   
  );}export default Main;

注意事项

• props.match.params 的类型需要手动声明，否则默认类型会是 {}
• 可以通过接口定义自定义的路由参数类型

2. useParams Hook

useParams 是 react-router-dom 提供的一个Hooks函数，能够直接返回路由参数对象。它与 props.match.params 的使用方式类似，但更加灵活，适用于组合式编程结构。

示例代码

import React from 'react';import { RouteConfigComponentProps } from 'react-router-config';import { useParams } from 'react-router-dom';interface IParam {  id?: string;}interface IProps extends RouteConfigComponentProps {} const Main = (props: IProps) => {  const { id } = useParams();  console.log('参数：', id);  return (    
   
          {id && 
    
当前ID: {id}
}    
   
  );}export default Main;

注意事项

• useParams 也需要指定参数的类型，否则默认类型会是 {}
• 建议在使用组合路由时配合使用 useParams 以方便参数管理

3. props.location.search

props.location.search 是路由历史中的搜索部分，通常用于从 URL 中提取额外的查询参数。它可以用于处理动态路由参数或自定义的查询字符串。

示例代码

import qs from 'query-string';interface IProps extends RouteConfigComponentProps {} const A = (props: IProps) => {  const gotoPage = () => {    props.history.push({      pathname: '/B',      search: qs.stringify({ id: 123123 })    });  };  return (          跳转到 B 页面      );}export default A;

接收参数示例

import qs from 'query-string';interface IProps extends RouteConfigComponentProps {} const B = (props: IProps) => {  const { id } = qs.parse(props.location.search);  console.log('参数：', id);  return (    
   
          {id && 
    
当前ID: {id}
}    
   
  );}export default B;

路由参数传递场景

A 页面跳转到 B 页面

在 A 页面中，通过 history.push 方法可以实现对 B 页面的跳转，并携带查询参数。

import qs from 'query-string';interface IProps extends RouteConfigComponentProps {} const A = (props: IProps) => {  const gotoPage = () => {    props.history.push({      pathname: '/B',      search: qs.stringify({ id: 123123 })    });  };  return (          跳转到 B 页面      );}export default A;

B 页面接收参数

在 B 页面中，通过 qs.parse 方法可以解析 URL 中的搜索参数。

import qs from 'query-string';interface IProps extends RouteConfigComponentProps {} const B = (props: IProps) => {  const { id } = qs.parse(props.location.search);  console.log('参数：', id);  return (    
   
          {id && 
    
当前ID: {id}
}    
   
  );}export default B;

注意事项

• 在使用 history.push 时，search 参数的传递需要使用 query-string 库进行 URL 编码
• useParams 和 props.match.params 在功能上是等价的，选择哪种方式取决于你的项目结构
• 对路由参数进行类型声明有助于代码的可读性和维护性

转载地址：http://ankbz.baihongyu.com/