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:
- Create a new
src/components/post/PostListItem.jsx
file, in which we are going to define a simplified version of thePost
component, which will be shown in thePostList
component. Inside it, import theuseContext
function, theThemeContext
and theLink
component fromreact-router
:import { useContext } from 'react' import { ThemeContext } from '@/contexts/ThemeContext.js' import { Link } from 'react-router'
- Define and export the
PostListItem
component, which accepts the postid
,title
, andauthor
as props:export function PostListItem({ id, title, author }) {
...