how to create a link that send the user to the id page in React Hooks and useRouteMatch

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.

https://stackoverflow.com/questions/65768304/how-to-create-a-link-that-send-the-user-to-the-id-page-in-react-hooks-and-userou January 18, 2021 at 11:04AM