React中使用reactstrap Button传递路由状态参数的问题与解决

我原本通过react-router-dom的Link组件传递路由状态参数，代码如下：

<Link to={{pathname: '/game/trivia-game/question'}} state={{complexityLevel : level}}...

现在想改用reactstrap的Button组件，但替换后无法传递状态参数。我尝试给onClick绑定函数并使用useNavigate：

import { Link, useParams, useLocation, useNavigate } from 'react-router-dom';

...

const handleClick = () => {
    navigate('/profile', { state: { userId: 123 } });
};

也试过其他方式，但目标页面始终获取到state: null。技术栈是JHipster 8.7.3 + React。

解决方案 #

我发现用useNavigate设置状态参数时，tag={Link}的写法无效，直接用Button组件绑定onClick的写法可行：

// 无效写法
<Button tag={Link} to='/game/trivia-game/question' onClick={handleButtonClick}...

// 有效写法
<Button onClick={handleButtonClick}...

原因解释 #

当你使用<Button tag={Link}>时，本质是让reactstrap的Button渲染成React Router的Link组件，此时路由跳转的控制权在Link的to属性上，你绑定的onClick里的navigate调用会和Link本身的跳转逻辑冲突——Link的跳转优先级更高，它不会携带你在navigate里设置的state参数，而是只会用to属性里的配置（这里你写的是字符串路径，没有包含state），所以目标页面拿到的state是null。

而直接使用Button组件并绑定onClick调用navigate时，跳转逻辑完全由useNavigate的配置控制，此时你传入的state会被正确附加到路由跳转中，目标页面就能通过useLocation()获取到对应的状态参数。

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