How to implement navigation linking in React JS app. Usually in HTML projects we use <a> tag for setting nav links. React Apps are mostly single-page apps and implementing the navigation is little different.
In React App we can implement the nav links easily. This actually changes the URL path and content of the parent component. So it looks like we moved to another page like normal navigation.
Implementing Nav Links in React JS App
For the implementation of navigation in our React App we will be using the Link from react-router-dom
import { Link } from "react-router-dom";
And we can use the link by wrapping our HTML block (which is to act as the link) with <Link> component.
<div className="flex items-center justify-end w-1/5 ">
<Link to="/user-account">
<img
className="h-12 rounded-full shadow-lg"
src={profileImg}
alt="user profile"
/>
</Link>
</div>
Now this will implement the navigation to the profile icon. When the profile icon is clicked by the user, he will be taken to the profile page. The URL will be changed and the profile page component will be loaded.
<Link to="/user-account">
We can specify the path in the to=” “ attribute. This will take the user to,
www.example.com/user-account
This is how easily we can implement the navigation nav links in our react app. Above we have seen the example codes using <Link> component in react for moving from one page to other.
