不使用react-router，修改URL查询参数后触发React组件重渲染

你的导航处理逻辑本身没问题，history.pushState确实能成功修改URL，但React组件不会自动感知URL的变化——因为React组件的重渲染触发条件是状态(state)、属性(props)更新，或者父组件重渲染，而pushState只是修改了浏览器历史记录和地址栏，并不会触发这些条件，所以组件里的randomValue始终是初始渲染时读取的旧值。

要解决这个问题，你需要结合React状态和事件监听来让组件感知URL变化：

具体实现步骤 #

1. 用useState保存当前的random参数值，作为组件的状态；
2. 在updateRandomValue里，更新URL后手动同步更新状态，触发组件重渲染；
3. 用useEffect监听浏览器的popstate事件（处理用户点击前进/后退按钮的场景），在事件触发时重新读取URL参数并更新状态。

修改后的代码如下：

import { useState, useEffect } from 'react';

export default function ExampleComponent() {
    // 初始化状态：从URL读取初始值
    const [randomValue, setRandomValue] = useState(() => {
        const params = new URLSearchParams(location.search);
        return params.get("random") || "none";
    });

    function updateRandomValue() {
        const updatedValue = Math.random().toString();
        const newURL = new URL(location.href);
        newURL.searchParams.set("random", updatedValue);
        // 更新URL
        history.pushState("", "", newURL);
        // 手动更新状态，触发重渲染
        setRandomValue(updatedValue);
    }

    useEffect(() => {
        // 处理前进/后退时的URL变化
        const handlePopState = () => {
            const params = new URLSearchParams(location.search);
            setRandomValue(params.get("random") || "none");
        };
        // 添加事件监听
        window.addEventListener('popstate', handlePopState);
        // 组件卸载时移除监听
        return () => window.removeEventListener('popstate', handlePopState);
    }, []);

    return (
        <>
            <p>random value is {randomValue}</p>
            <button onClick={updateRandomValue}>update new random value</button>
        </>
    );
}

对你问题的直接回答 #

• 导航处理方式没有错误，但缺少让React感知URL变化的机制；
• 需要使用useEffect来监听浏览器的前进/后退事件，同时结合useState维护状态；
• 不借助React状态的话确实无法实现——因为React是状态驱动的UI框架，没有状态变化就不会触发组件重渲染，也就无法更新显示的内容。

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