多组件使用useHistory等路由Hook时URL更新未同步触发重渲染问题

1. 子组件存在语法错误：useEffect(() => { decideButtonLogic() }, [hash])}; 行末尾多余的}直接结束了Child组件的函数体，导致decideButtonLogic被定义在组件作用域外，无法读取组件内最新的hash变量，useEffect也无法正常监听hash变化。
2. 父组件定义的updateHashRoute函数没有绑定触发逻辑：仅声明了修改hash的逻辑，但没有监听props.value的变化主动触发执行，hash不会自动更新，自然无法触发子组件的重渲染。
3. 路由上下文缺失：如果修复上述问题后仍存在不同步，说明父/子组件未被包裹在同一个Router（BrowserRouter/HashRouter）组件内部，路由Hook无法订阅到全局路由状态的变更。

• 修正子组件语法错误，确保所有逻辑都在组件作用域内，修正后代码如下：

const Child = () => {
    const { hash } = useLocation();
    const [buttonLogic, setButtonLogic] = useState({ showDecline: false, showAccept: false })
    // 根据hash判断按钮显示逻辑
    const decideButtonLogic = () => {
        if (hash.includes('apple')) {
            setButtonLogic({ showDecline: false, showAccept: true })
        } else if (hash.includes('banana')) {
            setButtonLogic({ showDecline: true, showAccept: false })
        }
    }
    useEffect(() => {
       decideButtonLogic()
    }, [hash])
    return (
        <div>
            { buttonLogic.showDecline && 
            <Button>Banana</Button>
            }
            { buttonLogic.showAccept && 
            <Button>Apple</Button>
            }
        </div>
    )
}

• 给父组件添加props.value的监听逻辑，值变化时主动更新hash：

const Parent= (props) => {
    const routeHistory = useHistory();
    const updateHashRoute = () => {
        if (props.value) {
            routeHistory.push({ hash: '#apple' });
        } else {
            routeHistory.push({ hash: '#banana' });
        }
    }
    // 监听props变更触发hash更新
    useEffect(() => {
        updateHashRoute()
    }, [props.value, routeHistory])
    return (
        <div>
            <Child />
        </div>
    )
}

• 确认组件层级：确保从根组件到Parent、Child的整条组件链，都被包裹在同一个Router组件内部，路由Hook才能正常获取全局路由状态。
• 兜底兼容方案：如果仍存在路由状态同步问题，可以直接监听原生hashchange事件触发逻辑：

// 在Child组件内添加该副作用
useEffect(() => {
    const syncHash = () => decideButtonLogic()
    window.addEventListener('hashchange', syncHash)
    return () => window.removeEventListener('hashchange', syncHash)
}, [])

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