It's possible that you just started learning React or probably you have been learning React for some time and you still don't know the difference between the Link tag and the Anchor tag and when to use them in your React application. the objective of this article is to help you understand just that.
Anchor tags
If you are just learning React, you must be familiar with what the anchor
tag does from HTML. the anchor tag is used for the same function in React too, which is to serve as a link between two pages in the same application or a different application.
<a href="https://www.aviatorcodes2.com">My Website</a>
The value of the href
attribute is usually a URL that links to an external page, a path to a section or page in the same application, email or phone number. The anchor
tag also accepts other attributes like download
, target
, media
,rel
etc. [source]
Link
Link
, is used to allow your users to be able to successfully navigate around your application.
Link
accept props to
whose value is either a string or an object which are called locator descriptor,
- string: if it's a string, it represent an absolute path to link to, e.g.
/users/123
,Link
doesn't support a relative path butanchor
tag does, relative path is a location that is relative to a current directory, relative path makes use of single or double dot(.)
,(..)
which helps you locate the current directory and the parent directory e.g.../users/user123
- Object: an object, can have the following keys:
- pathname: a string representing the path to link to.
- query: an object with a key:value pair to be stringified
- hash: A hash to put in the URL
- state: State to persist the location. [source]
// string
<Link to="/users">Users</Link>
// Object
<Link to={`/users/${user.id}`}>{user.name}</Link>
More reasons..
Since anchor
tag and Link
fundamentally help us link different pages in our application together, so the question now is, why is Link
special aside from the fact that it accepts string and object, Are there any more differences between the two? yes, there is.
The anchor
tag href
attribute would trigger a page refresh every time it is clicked, you will even notice the reload icon on your browser load every time you click an anchor
tag link
These reloads will continually reset the application states which we don't want, because it will affect the performance of your application. Whenever you need to navigate through your application use Link
of react-router as it does not trigger a page refresh, using Link
also makes your React application pages load faster. Since React is used to create single page applications, make sure you choose Link or Navlink when creating routes within your application
You have seen when to use Link
so when should you use anchor
tags? use <a/>
tags when you need to link your application to an external URL.
Quick Demo on how to use Link
- After creating your react application with
npx create-react-app my-app
, install react-router-dom using this commandnpm install react-router-dom // or yarn install react-router-dom
- Create the various pages of your application and inside your
App.js
import those various pages and wrap them inside react router. eg.
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import NotFound from './pages/NotFound';
function App() {
return (
<>
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/not-found" element={<NotFound />} />
</Routes>
</Router>
</>
);
}
export default App;
- After the above step, you can now use these routes anywhere in your application, all you have to do is, inside the page or component where you need either of the routes, import
Link
and pass the route path"/"
,"/about"
or"/not-found"
to theto
props of theLink
tag. e.g. Inside the not-found page, I can create a Button, Text or Icon which I will wrap with theLink
tag that will route my users back to the home page any time they click on it
import { Link } from 'react-router-dom';
function NotFound() {
return (
<div>
<h1>Oops! Something is wrong</h1>
<p>404 - Page not found!</p>
<Link to="/">
Back To Home
</Link>
</div>
);
}
export default NotFound;
Thank you for reading, see you in my next article. Remember to stay hydrated✌