如何在函数组件中获取通过history.replace传递的路由参数match.chatroomId

首先你需要先保证项目的路由配置中，/chat对应的路径声明了动态参数占位符，格式为/chat/:chatroomId，否则参数无法被路由解析识别。

以下分不同react-router版本给出对应实现方案：

react-router v6 版本（当前主流版本） #

直接调用官方提供的useParams钩子即可获取参数，示例代码如下：

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

// 目标跳转组件
function ChatRoom() {
  // 解构的参数名必须和路由配置里的占位符名称完全一致
  const { chatroomId } = useParams();
  
  // 拿到参数后可直接在组件内使用
  console.log('聊天室ID：', chatroomId);

  return <div>当前聊天室ID：{chatroomId}</div>;
}

react-router v5 版本 #

有两种常用获取方式：

1. 使用useParams钩子，用法和v6基本一致：

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

function ChatRoom() {
  const { chatroomId } = useParams();
  // 后续正常使用参数即可
}

2. 若组件是被Route组件直接绑定渲染，也可以从组件props的match属性中获取：

function ChatRoom(props) {
  const chatroomId = props.match.params.chatroomId;
  // 后续正常使用参数即可
}

额外补充 #

如果你有不想拼接在URL路径里的隐式参数，也可以通过history.replace的第二个参数传递：

// 跳转时传参
history.replace(`/chat/${match.chatroomId}`, { hiddenInfo: '自定义隐式参数' })

目标组件通过useLocation钩子获取隐式参数：

// v6写法
import { useLocation } from 'react-router-dom';
function ChatRoom() {
  const location = useLocation();
  console.log(location.state?.hiddenInfo);
}

内容的提问来源于stack exchange，提问作者Abhishek Shah