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}

这是我的search.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}