Linking to routes using the <Link> component

When dealing with links that the user can click to visit a different page, it is best and easiest to use the Link component. This component will automatically create a simple link to a specific page for us.

Let’s get started using the Link component to provide a link to a single post:

1. Create a new src/components/post/PostListItem.jsx file, in which we are going to define a simplified version of the Post component, which will be shown in the PostList component. Inside it, import the useContext function, the ThemeContext and the Link component from react-router:

   import { useContext } from 'react'
   import { ThemeContext } from '@/contexts/ThemeContext.js'
   import { Link } from 'react-router'
   

2. Define and export the PostListItem component, which accepts the post id, title, and author as props:

   export function PostListItem({ id, title, author }) {
   

...