IT技术 - 我如何在提交表单时将结果重定向到 React 中的另一个页面 - 吾爱随笔录

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

我什至尝试使用 react redux、react router 和更多在线示例，但不起作用，不要做错了什么。

我怎样才能接近它？我希望有人可能让我在下面提供的代码方面走上正轨，也欢迎您提出建议/反馈。

先感谢您。

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

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;

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" }); } }