Question

我正在构建一个搜索应用程序，并试图让一些以选项卡格式显示的结果链接起作用。就像您在 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。

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

我需要找到一种方法来在具有工作链接的 ResultsViewPage.tsx 文件中呈现 ResultNavigationTabs。

Answer 1

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

搜索结果链接标签

1 个答案: