时间戳

首页 > 解决方案 > 如何在 React Hooks 和 useRouteMatch 中创建将用户发送到 id 页面的链接

javascript - 如何在 React Hooks 和 useRouteMatch 中创建将用户发送到 id 页面的链接

问题描述

我是 React Hooks 的中级人员，并试图了解如何使用useRouteMatch或任何好的解决方案来实现以下案例。

我看过网上和不同的例子，但我似乎无法根据项目列表弄清楚如何创建用户点击的链接，然后ex: book/1/在点击页面上的一本书后发送到 id 页面books/

数据.js

export const books = [
    {
        id: 1,
        book_name: "A new year, a new era",
    },
    {
        id: 2,
        book_name: "You got to start somewhere",
    },
    {
        id: 3,
        book_name: "The tale of a gemini",
    },
]

应用程序.js

import { books } from './components/Data';

function App() {

  const booksData = books;

  return (
    <div className="header">
      {booksData.map((data) => (
      <div className="book-id" key={data.id}>
        <div className="book-name"><b>{`${data.book_name}`}</b>
        </div><br/><br/>
      </div>))}
    </div>
  );
}

export default App;

如果有人可以从上面的示例中向我展示如何做到这一点，我将能够清楚地理解这一点。

任何帮助将非常感激。

提前致谢。

标签： javascriptreactjsreact-routerreact-hooksreact-router-dom

解决方案

您只是在寻找Link组件吗？

import { Link } from 'react-router-dom';

// later in your code...
<Link to="/books/1">Book 1</Link>

// or you can do it dynamically like so:
<Link to={`/books/${book.id}`}>Book {book.id}</Link>

推荐阅读