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

Question

I am intermediate with React Hooks and trying to understand how to use useRouteMatch or any good solution to achieve the case below.

I have looked online and different examples but i cant seem to figure out based on a list of items, how to create a link that a user would click then get sent to the id page ex: book/1/ after clicking on one book on page books/

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

If anybody could show me how to do it from the example above, i would be able to understand that clearly.

Any help would be really appreciated.

Thanks in advance.

Answer 1

Are you just looking for the Link component?

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>