UseNavigate不能用于动态搜索查询

Question

useNaviagte() ofreact-router-dom:^6.7.0不能用于动态搜索查询。如何使用我的搜索文本作为导航路线?

My Search组件:

import { useNavigate } from 'react-router-dom';
function SearchBar() {
const [searchItem, setSearchItem] = useState("")
const navigate = useNavigate();
const handleSubmit = (e) =>{
e.prevnetDefault()
navigate(`/search?q=${searchItem}`)
};
return (
<div className='search-bar'>
<form onSubmit={handleSubmit}>
<label htmlFor='search'>Search: </label>
<input
type= "text"
id= "search"
onChange= {(e) => setSearchItem(e.target.value)}
/>
</form> 
... ...    

在App.js:

{
path: "/search",
element: <div><Search/></div>,
},

Package.json:

"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.7.0",

Answer 1

当您调用e.preventDefault()时，看起来有一个错别字。这可能会引起问题。此外，您可以使用控制输入添加value属性到您的输入字段，如:

<input
type= "text"
id= "search"
value={searchItem}
onChange= {(e) => setSearchItem(e.target.value)} />

如果你分享你的搜索路由页面来分享你在那里使用的代码，这将是有帮助的。您可以使用useSearchParams来获取搜索页面上的搜索参数。