如何在提交表单时将结果重定向到React中的另一个页面

Posted 2023-01-11

我想让搜索结果显示在React Js的另一个页面上。现在，当我提交我的搜索表单时，它会在我不想要的同一页面上显示结果。我一直试图在过去的4个小时内完成这项工作（我是ReactJS的新手），我在网上看到了很多建议，但似乎没有什么能像我希望的那样起作用。

我甚至尝试过使用react redux，路由器以及更多的在线示例，但不起作用，不要我做错了。

我怎么处理它？我希望有人可能会把我放在正确的轨道上，关于我在下面提供的代码，也欢迎您的建议/反馈。

先感谢您。

这是我负责表单的搜索引擎组件

const SearchEngine = (props) => 

        return (

            <div>
                <h3 className="spacer">Search Engine</h3>
                <form onSubmit=props.getTrend>
                <div class="input-group md-form form-sm form-2 pl-0">

                        <input class="form-control my-0 py-1 red-border" type="text" name="keyword" placeholder="Enter your keyword" aria-label="Search" />

                    <div class="input-group-append">
                      <button class="input-group-text red lighten-3" id="basic-text1"><i class="fa fa-search text-grey" aria-hidden="true"></i></button>
                    </div>
                </div>
                </form>
            </div>
        );


export default SearchEngine;

这是结果组件，我想显示结果

const Results = (props) => (

    <div>

        Hello

    </div>

);


 export default Results;

答案

收到你的api电话后，你可以推动并移动到另一个页面。对于你的，它可能看起来像这样。

    getTrend = async (e) => 
    e.preventDefault();

    const keyword = e.target.elements.keyword.value;

    const api_call = await fetch(`http://localhost:8081/trend/twitter?keyword=$keyword`); //make API call

    const data = await api_call.json(); 


   if (keyword) 
        this.setState(
          tweets: data
        );
        console.log(this.state.tweets);
        this.props.history.push(
  pathname: '/results',
  state:  detail: data 
)
       
      else 
        this.setState(
          tweets: undefined,
          error: "Please enter the values"
        );
      
  

然后，在您的App.js中，您可以访问它

props.location.state.detail

这可能要求您使用withRouter作为HOC。我要改变的一件事是在componentDidMount中获取你的api。但是，如果你用钩子来解决这个问题会容易得多。虽然它可能需要一些refractoring，你可以使用一个钩子进行api调用，这对于启动和运行来说更简单。