ReactJS：表单提交后重定向，不刷新

我创建了一个表单，在按下提交按钮后调用搜索功能。我希望搜索结果显示在另一个函数组件中（已为此使用了React上下文）

但是，我遇到了一个问题，如果不刷新页面，我就无法将它链接到另一个路径

/yourstage/results

。如果刷新页面，则状态中存储的my seachResult将消失

import React, { Fragment, useState, useEffect, useContext } from "react";
import { withRouter, Link } from "react-router-dom";
import searchResultContext from "./SearchResultContext";

const Search = () => {
  const [wave, setWave] = useState("$perc");
  const [pack_hu, setPackHu] = useState("$perc");
  const { searchResult, setSearchResult } = useContext(searchResultContext);

  useEffect(() => {
    console.log(JSON.stringify(searchResult));
  }, [searchResult]);

  //submit a form to search
  const submitSearch = async (e) => {
    e.preventDefault()
    try {
      const response = await fetch(
        `http://localhost:5000/yourstage/search/${wave}/${pack_hu}`,
        {
          method: "GET",
          headers: { "Content-Type": "application/json" },
        }
      );
      setSearchResult(await response.json());

      //Reset Form and State
      document.getElementById("searchForm").reset();
      setWave("$perc");
      setPackHu("$perc");

    } catch (error) {
      console.error(error.message);
    }
  };

  //return the form html
  return (
    <Fragment>
      <h1 className="text-center mt-3">Search</h1>
      <form id="searchForm" onSubmit={submitSearch}>
        <div className="form-group row">
          <label htmlFor="Wave" className="col-sm-2 col-form-label">
            Wave:
          </label>
          <div className="col-sm-10">
            <input
              type="text"
              className="form-control"
              placeholder="Wave Number"
              maxLength="10"
              onChange={(e) => setWave(e.target.value)}
            />
          </div>
        </div>

        <div className="form-group row">
          <label htmlFor="pack_hu" className="col-sm-2 col-form-label">
            Pack HU:
          </label>
          <div className="col-sm-10">
            <input
              type="text"
              className="form-control"
              placeholder="Pack HU"
              maxLength="10"
              onChange={(e) => setPackHu(e.target.value)}
            />
          </div>
        </div>

        <div className="row text-center mt-5">

          {/**Search based on parameter*/}
          <div className="col-6">
            <button type="submit" className="btn-lg btn-primary">
              <Link to="/yourstage/results">Search</Link>
            </button>
            
          </div>
        </div>
      </form>
    </Fragment>
  );
};

export default withRouter(Search);

import React，{Fragment，useState，useffect，useContext}来自“React”；
从“react router dom”导入{withRouter，Link}；
从“/searchResultContext”导入searchResultContext；
常量搜索=（）=>{
const[wave，setWave]=useState（$perc）；
const[pack_hu，setPackHu]=useState（$perc）；
const{searchResult，setSearchResult}=useContext（searchResultContext）；
useffect（（）=>{
log（JSON.stringify（searchResult））；
}，[searchResult]）；
//提交表格进行搜索
const submitSearch=async（e）=>{
e、 预防默认值（）
试一试{
const response=等待获取(
`http://localhost:5000/yourstage/search/${wave}/${pack_hu}`，
{
方法：“获取”，
标题：{“内容类型”：“应用程序/json”}，
}
);
setSearchResult（wait response.json（））；
//重置窗体和状态
document.getElementById（“searchForm”）.reset（）；
setWave（“$perc”）；
setPackHu（“$perc”）；
}捕获（错误）{
console.error（error.message）；
}
};
//返回表单html
返回(
搜寻
波浪：
setWave（e.target.value）}
/>
胡包：
setPackHu（e.target.value）}
/>
{/**基于参数的搜索*/}
搜寻
);
};
使用路由器导出默认值（搜索）；

btw，我也尝试了此链接中所述的解决方案，但它只是将我指向我的链接，但不显示提交按钮的结果。您是否尝试了

useHistory

hook？您还希望使用

useRef

访问DOM节点，而不是直接使用

getElementById（）进行查询

@BoussadjraBrahim，是的，它很管用！在你的提示下我又试了一次。一定是以前做错了什么。参考：@sero我可以把它作为答案发布吗？顺便说一句，我也尝试过这个链接中所述的解决方案，但它只是将我指向我的链接，但不显示“我的提交”按钮的结果。您是否尝试了

useHistory

钩子？您还希望使用

useRef

访问DOM节点，而不是直接使用

getElementById（）

@boussadjrahim进行查询，是的，它可以工作！在你的提示下我又试了一次。一定是以前做错了什么。参考：@sero我可以把这个作为答案吗？