Next.js 14 App目录下输入框onChange时更新query param的实现

子组件实现 #

子组件通过URLSearchParams处理现有URL参数，仅更新value字段，同时利用react-router的useNavigate更新URL，无需父子组件传值：

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

const TextInputComp = () => {
    const navigate = useNavigate();

    function onInputChange(e) {
        const inputValue = e.target.value;
        // 解析当前URL的所有query参数
        const searchParams = new URLSearchParams(window.location.search);
        // 更新或添加value参数，保留其他参数不变
        searchParams.set('value', inputValue);
        // 替换当前URL（避免历史记录冗余，需保留历史可移除{replace: true}）
        navigate(`?${searchParams}`, { replace: true });
    }

    return (
        <input type="text" onChange={onInputChange} />
    )
}

父组件实现 #

父组件通过useLocation监听URL的search部分变化，实时解析并获取value参数：

import { useState, useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function ParentComp () {
    const [valueQueryParam, setValueQueryParam] = useState('');
    const location = useLocation();

    useEffect(() => {
        const searchParams = new URLSearchParams(location.search);
        // 获取value参数，无则设为空字符串
        const currentValue = searchParams.get('value') || '';
        setValueQueryParam(currentValue);
    }, [location.search]) // 依赖URL的search部分，参数变化时触发更新

    return(
        <div>
            <TextInputComp />
            {valueQueryParam} your realtime query param text 
        </div>
    )
}

注意事项 #

• 需确保项目已安装并配置react-router-dom（v6及以上版本），否则无法使用useNavigate和useLocation钩子。
• 若不需要替换URL历史，可将navigate的第二个参数移除，每次输入会生成一条新的历史记录。

内容的提问来源于stack exchange，提问作者AL Faiz Ahmed