搜索结果链接选项卡答案

【问题标题】：Search results link tabs搜索结果链接选项卡
【发布时间】：2021-06-16 00:48:48
【问题描述】：

我正在构建一个搜索应用程序，并试图让一些以选项卡格式显示的结果链接起作用。就像您在 google.com/search=?user_query 和 bing.com/search=?user_query... 上看到的一样，在您提交初始查询后，您可以点击“图片”、“购物”和“新闻”，例如并根据您单击的结果链接/选项卡呈现不同的结果视图。

我正在使用 ReactiveSearch 来构建我的搜索 UI。到目前为止，我有这个：

ResultNavigationTabs.tsx 用于构建链接选项卡

class ResultNavigationTabs extends Component {
  
  render() {
    const { classes, items, location: { pathname } } = this.props;

    return (
      <ul className={classes.nav}>
        {items.map(item => (
          <Link to={item.link} key={item.text}>
            <li className={item.link.startsWith(pathname) ? "active" : ""}>
              {item.text}
            </li>
        </Link>
        ))}
      </ul>
    );
  }
}

export default withStyles(styles)(withRouter(ResultNavigationTabs));

然后我在我的 ResultsViewPage.tsx 中渲染这个组件，如下所示：

render() {
const { selected } = this.state;

...(omitted for brevity)

<ResultNavigationTabs2
   className={classes.myNavigationTabs}
     items={[
       { text: "Web", link: `/search?q="${selected}"` },
       { text: "News", link: `/news?q="${selected}"` },
       { text: "Shopping", link: `/shopping?q="${selected}"` },
     ]}
 />

链接会呈现，但它们不起作用。如果我将鼠标悬停在链接上，则搜索查询字符串为空（http://localhost:3000/search?q=%22%22）。如果你使用过 ReactiveSearch，它应该是：http://localhost:3000/search?q=%22user%20query%22。

我已经让它工作了，但只有当我在与搜索框相同的文件中呈现 ResultNavigationTabs 时（ReactiveSearch 语言中的 DataSearch）。但是，如果我这样做，它会出现在标题中搜索框的正下方，而不是结果区域。

我需要想办法在 ResultsViewPage.tsx 文件中呈现带有工作链接的 ResultNavigationTabs。

【问题讨论】：

标签： material-ui reactivesearch

【解决方案1】：

经过深思熟虑的搜索后，我在 SO 上找到了answer！还附带 2 个 CodeSandBox 演示 - 看看它们。

【讨论】：