使用 Button 而不是 Link 传递状态参数

Question

我正在使用 Link 传递状态参数（来自“react-router-dom”）。

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

但我想用 Button 代替（来自“reactstrap”）。 但是，如果我从“链接”更改为“按钮”，我将无法传递状态参数。

我尝试为 onClick 事件和 useNavigate() 设置一个函数：

import { Link, useParams, useLocation, useNavigate } from 'react-router-dom';
...
const handleClick = () => {
    navigate('/profile', { state: { userId: 123 } });
};

我也尝试过 setState()。

但是，我在目标页面中收到

state: null

。

如何使用Button并仍然传递状态参数？

我正在使用 JHipster 8.7.3。与反应。

Answer 1

您可以使用

useNavigate

来做到这一点

import React from 'react';
import { useNavigate } from 'react-router-dom';

const TriviaGameButton = () => {
  const navigate = useNavigate();
  const level = 'easy'; // Example value for complexityLevel

  const handleButtonClick = () => {
    navigate('/game/trivia-game/question', { state: { complexityLevel: level } });
  };

  return (
    <button onClick={handleButtonClick}>
      Go to Trivia Game
    </button>
  );
};

export default TriviaGameButton;