react-router-dom v6.7.0的useNavigate动态搜索查询失效，如何实现搜索导航？

首先修复代码中的致命拼写错误 #

你的handleSubmit函数里存在拼写错误：e.prevnetDefault()应该是e.preventDefault()，这个错误会导致表单默认的页面刷新行为无法被阻止，直接让useNavigate的客户端导航逻辑失效。

修正并优化后的SearchBar组件代码 #

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

function SearchBar() {
    const [searchItem, setSearchItem] = useState("");
    const navigate = useNavigate();

    const handleSubmit = (e) => {
        e.preventDefault(); // 修正拼写错误
        // 用URLSearchParams处理查询参数，自动解决特殊字符编码问题
        const searchParams = new URLSearchParams();
        if (searchItem.trim()) {
            searchParams.set('q', searchItem.trim());
            navigate(`/search?${searchParams.toString()}`);
        }
    };

    return (
        <div className='search-bar'>
            <form onSubmit={handleSubmit}>
                <label htmlFor='search'>Search: </label>
                <input
                    type="text"
                    id="search"
                    value={searchItem} // 绑定value，将输入框设为受控组件
                    onChange={(e) => setSearchItem(e.target.value)}
                />
                <button type="submit">搜索</button> {/* 添加提交按钮，明确交互入口 */}
            </form>
        </div>
    );
}

补充：在/search页面获取搜索参数 #

如果需要在搜索结果页面读取查询关键词，可以使用useSearchParams钩子：

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

function SearchResult() {
    const [searchParams] = useSearchParams();
    const searchQuery = searchParams.get('q');

    return (
        <div>
            {searchQuery ? (
                <p>搜索关键词：{searchQuery}</p>
            ) : (
                <p>请输入关键词后搜索</p>
            )}
        </div>
    );
}

对应的路由配置可以更新为：

// App.js中的路由配置
{
    path: "/search",
    element: <div><SearchBar /><SearchResult /></div>,
},

内容的提问来源于stack exchange，提问作者R. Mahbub