NEXTJS:使用useRouter中的参数填充和擦除输入字段并保留"后退按钮"历史记录的最佳方法

Question

我正在通过创建一个简单的2页搜索引擎来学习NextJS。 索引页只是一个输入字段和提交按钮，它传递诸如"/search？q=nissan maxima"之类的参数，我使用"router.query.q"访问搜索页面上的参数。

与任何搜索引擎一样，当前查询应显示在搜索结果页面上的输入字段中，按"后退按钮"应使用以前的查询参数填充输入字段。我能够实现我想要的排他性，除了由于以下代码行我无法删除现有的输入值：

<input type="text" id="search " name="q" value={query || props.query} onChange={handleChange}/>

我需要另一种方法来处理value={query || props.query}

这是我搜索的代码.js

import {useRouter} from 'next/router';
import React, {useState} from 'react';
const SearchForm = props => {
const [query, setQuery] = useState(props.query);
const handleChange = event => setQuery(event.target.value);
return (
<div>
<form action={`/search?${props.query}`}>
<input type="text" id="search " name="q" value={query || props.query}
onChange={handleChange}/>
<input type="submit" value="Submit"/>
</form>
</div>
);
};
const Search = () => {
const router = useRouter();
return (
<SearchForm query={router.query.q}/>
);
};

export default Search;

提前感谢任何帮助，非常感谢。

Answer 1

我能够使用以下代码解决我的问题：

value={query <= query ? query : props.query}