Javascript 在下一页中搜索结果

我的组件中有一个搜索栏。我想在单击搜索时，它应该调用搜索操作并将结果导航到父组件

 <input 
              onKeyPress={(event) => {
             if (event.key === "Enter") {
                  this.onSearch(event.target.value);
                }
              }}
              type="text"
            />

我希望它导航到一个带有搜索字符串的详细信息页面，在URL中，我希望类似于：

http://localhost:8080/details?search=“搜索字符串”

有人能帮我吗？

你可以这样做

onSearch(searchString) {
  // perform Search
  this.props.history.push("/details?search=" + encodeURIComponent(searchString));
}

---

希望这有帮助。

对于我来说，使用

路由器。push

工作，搜索查询通过query

参数传递，并且
路径名可以包含您要导航到的页面

例如：

步骤1:导入
useRouter
：

import { useRouter } from "next/router";

步骤2:创建路由器变量：

 const router = useRouter();

步骤3:在搜索中使用事件处理程序（我使用的是语义UI）并使用名为searchText的状态

const [searchText, setsearchText] = useState("");

您可以使用输入，我在这里使用语义UI的搜索组件：


    <Search
              input={{ icon: "search", iconPosition: "left" }}
              showNoResults={false}
              selectFirstResult={true}
              placeholder="Search..."
              value={searchText}
              onSearchChange={(evt, data) => {
                setsearchText(data.value);
              }}
              onKeyPress={e => {
                if (e.key === "Enter") {
                  router.push({
                    pathname: "/listSearch",
                    query: {
                      searchQuery: searchText
                    }
                  });
                }
              }}
            />


第五步：
在my case的目标页面
listSearch
中，您可以输入以下代码以获取搜索字符串：

import { useRouter } from "next/router";

...

const router = useRouter();
const searchQuery =
    router && router.query && router.query && router.query.searchQuery
      ? router.query.searchQuery
      : "";


希望有帮助
您好，我的答案解决了您的问题吗？是的，但我们希望，每当用户将搜索结果添加到书签时，他都应该在激活搜索选项的情况下登录到同一页面。您可以在呈现/details页面的che组件的componentDidMount方法中处理这个问题：您可以检查查询参数的存在并处理它。希望这有助于我能够发送它，但我的问题是我必须为页面添加书签以便进一步使用，这样每当我向使用文本或短信的人发送页面链接时，他应该能够使用相同的搜索结果打开同一页面。您对此有什么想法吗？如果您直接打开示例链接：
http://localhost:8080/details?search=“searchString”
您是否没有得到搜索结果？因为对我来说，它是在做搜索，因为细节是一个页面，我从routes中获取了URL参数，如上面的回答步骤5所示。实际上，我在我的项目中使用类组件，所以理解功能组件对我来说有点棘手。你能帮我在我的目标页面中作为类组件写些什么吗，因此，如果我打开的链接是：“，我会按照我答案的第5步返回到相同的搜索结果，我希望它对您有所帮助。
http://www.localhost.com/listSearch?searchQuery=cds

import { useRouter } from "next/router";

...

const router = useRouter();
const searchQuery =
    router && router.query && router.query && router.query.searchQuery
      ? router.query.searchQuery
      : "";