【问题标题】：how to create a link that send the user to the id page in React Hooks and useRouteMatch如何在 React Hooks 和 useRouteMatch 中创建将用户发送到 id 页面的链接
【发布时间】：2021-04-22 09:12:38
【问题描述】：

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

我查看了在线和不同的示例，但我似乎无法根据项目列表弄清楚如何创建用户单击的链接，然后在单击一本书后发送到 ID 页面 ex: book/1/页面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",
    },
]

App.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;

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

任何帮助将不胜感激。

提前致谢。

【问题讨论】：

标签： javascript reactjs react-router react-hooks react-router-dom

【解决方案1】：

您只是在寻找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>

【讨论】：