处理页面刷新和前进/后退功能

Question

我正在使用react和next.js进行API请求（来自搜索栏）并在首页上显示电影列表，每个搜索结果将带我到不同的页面，该页面将显示与该电影有关的数据。每次刷新详细信息页面时，由于进行了错误的api请求，查询的结果都会丢失，并且当我使用向后/向前按钮时，搜索结果也会丢失。

index.js

  <Link href={`/Details?id=${movie.imdbID}`}>  //code to take me to the Details page

Details.js

const Details =()=>{    
const router = useRouter();
let [result,setResult]=useState({});
const query=router.query.id;  //storing the id from the URL

useEffect(() => {
axios.get('http://www.omdbapi.com/?',
            {params:{
                apikey:'',
                i:query,
                plot:'full'
                }   
            }).then(response=> setResult(response.data))
         }, []);
    return <SearchBar />    
 } export default Details;

而且我已经实现了在index.js中使用它的Searchbar组件，该组件工作正常。我希望在details.js文件中使用相同的组件，以避免代码冗余，但我不知道正确的方法。

index.js

      <SearchBar whenSubmit={this.onSearchSubmit}/>

SearchBar.js

    onFormSubmit=(event)=>{
    event.preventDefault();
    this.props.whenSubmit(this.state.term);
    }

    render(){
    <form className="ui form" onSubmit={this.onFormSubmit}>
           <input type="text" value={this.state.term} placeholder="search any movie" 
            onChange={event=>this.setState({term: event.target.value})} />
      </form>}

Answer 1

由于我可以观察到您的代码，因此您正在使用查询参数，这将在每次重新加载时丢失您的querystring值，或者可以向前和向后说。您可以尝试使用path_param而不是query_param。

Answer 2

如果您阅读文档，将会发现：