无法在反应路由器 dom v6 中使用 useNavigate() 传递状态

Question

您好，我正在尝试使用 useNavigate 将一个值传递给另一个页面，当按下一个按钮（按钮 B）时，它会调用该函数，该函数包含我从 useNavigate() 挂钩中获得的导航函数，然后我使用 useLocation() 挂钩来获取值。

令我感到奇怪的是，console.log(score) 打印出正确的分数值，但导航函数无法传递该值，它只是在另一端显示 null。请问为什么会这样？以下是我的代码。

const ComponentName = () => {
    const [score, setScore] = React.useState(0);

    const handleNavigate = () => {
        console.log(score);
        navigate("/nextPage", {state: score})
        
    }

    return(
    {someCondition
         ? <Button variant="contained"}>A</Button>
         : <Button variant="contained" onClick={handleNavigate}>B</Button>}

    )
}

提前致谢。

Answer 1

显然，问题是值 0。

也许有一个 if 语句，如果 0 return 空状态...

一个解决方案是将分数作为对象传递，例如：

navigate('/nextPage', { state: { score } })

无法在反应路由器 dom v6 中使用 useNavigate() 传递状态

Cannot pass state using useNavigate() in react router dom v6

reactjs

react-router

react-router-dom