React Router中使用Link传递state时数据未更新的问题求助

我正在用React写一个简单的Web应用，尝试用React Router的useLocation钩子在页面间传递数据，但一直没法成功传递更新后的数据。我发现控制台里明明显示un的值已经变了，但把它作为state传给"/link-page"时，传过去的还是初始值——也就是链接页面上显示的用户名始终是'h'。

下面是我的代码：

Home.jsx #

import { Link } from "react-router-dom";

let un = 'h'

function handleChange() {
    un = document.getElementById("username").value;
}

function Home() {
    return (
        <>
            <h1>welcome to duel.fm!</h1>
            <h3>enter your last.fm username below</h3>
            <form>
                <input type={"text"} id={"username"} onChange={handleChange} />
                <Link to={"/link-page"} state={{ username: un }}>
                    <input type={"submit"} value={"submit"} />
                </Link>
            </form>
        </>
    )
}

export default Home;

LinkPage.jsx #

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

function LinkPage() {
    const location = useLocation();
    const username = location.state.username;

    return (
        <>
            <h3>share this link with your friend!</h3>
            <h5>{username}</h5>
        </>
    )
}

export default LinkPage;

问题原因分析 #

你现在遇到的问题核心在于没有使用React的状态管理来跟踪输入值。你用了一个普通的全局变量un，虽然你在handleChange里修改了它的值，但React根本不知道这个变量发生了变化，所以组件不会重新渲染，Link里的state也就一直是初始的'h'，不会跟着更新。

另外还有个小问题：你把提交按钮放在Link标签里，这其实不太合适——表单的提交逻辑和路由跳转混在一起了，而且默认的表单提交行为可能会导致页面刷新，干扰React Router的跳转。

解决方案 #

我们需要用React的useState钩子来管理输入值，让React能感知到值的变化并重新渲染组件，同时优化表单的处理方式：

修改后的Home.jsx代码：

import { useNavigate } from "react-router-dom";
import { useState } from "react";

function Home() {
    // 使用useState管理用户名状态
    const [username, setUsername] = useState('h');
    const navigate = useNavigate();

    // 处理输入变化，更新状态
    const handleChange = (e) => {
        setUsername(e.target.value);
    };

    // 处理表单提交，手动跳转并传递state
    const handleSubmit = (e) => {
        e.preventDefault(); // 阻止表单默认提交行为
        navigate("/link-page", { state: { username: username } });
    };

    return (
        <>
            <h1>welcome to duel.fm!</h1>
            <h3>enter your last.fm username below</h3>
            <form onSubmit={handleSubmit}>
                <input type="text" value={username} onChange={handleChange} />
                <input type="submit" value="submit" />
            </form>
        </>
    )
}

export default Home;

改动说明 #

1. 用useState管理状态：把原来的全局变量un换成React的状态变量username，这样每次输入变化调用setUsername时，React会重新渲染组件，跳转时的state就会带上最新的值。
2. 使用useNavigate替代Link跳转：因为表单提交应该有自己的处理逻辑，用navigate可以更灵活地控制跳转，同时阻止表单的默认刷新行为。
3. 绑定input的value属性：这样输入框的值和React状态保持同步，是React中处理表单输入的标准方式，避免直接操作DOM（比如document.getElementById）。

这样修改后，你输入的用户名就能正确传递到LinkPage页面啦～

备注：内容来源于stack exchange，提问作者shamwoah