时间戳

首页 > 解决方案 > 使用 React 为每个搜索结果路由到一个新页面？

reactjs - 使用 React 为每个搜索结果路由到一个新页面？

问题描述

我对 React 很陌生，我正在开发这个 web 应用程序，在那里我设法从 Google Books API 接收数据，并在我搜索它时设法列出结果。

每当用户单击其中一本书时，如何为每本书创建一个新页面？

到目前为止，代码看起来像这样：

  renderSearchResults = () => {
const { results } = this.state;

if (Object.keys(results).length && results.length) {
  return (
    <div className='results-container'>
      {results.map((result) => {
        return (
          <a
            key={result.id}
            href={result.previewLink}
            className='result-item'
          >
            <div className='image-wrapper'>
              <a href={result.volumeInfo.infoLink}>
                <img
                  className='image'
                  src={result.volumeInfo.imageLinks.smallThumbnail}
                  alt={result.volumeInfo.infoLink}
                />
              </a>
            </div>
            <h6 className='image-title'>{result.volumeInfo.title}</h6>
          </a>
        );
      })}
    </div>
  );
}

};

现在我做到了，当每本书被点击时，它会重定向到每本书的谷歌页面，但我想让它像下面的设计一样，当用户点击时，他们将被重定向到这样的新页面：

我想开发的设计

如果您有解决方案，或者您是否需要任何其他信息来帮助我，请告诉我。

除此之外，周末愉快！

标签： reactjsapiroutes

解决方案

存在于 html 中的 target 属性，你可以这样使用：

<a href="https://www.w3schools.com" target="_blank">Visit W3Schools</a>

有关更多信息，请参阅此 w3schools.com 定义

推荐阅读