Welcome back to CodeYourCraft! Today, we're diving into the world of React JS by exploring the Link component. This powerful tool helps us create smooth navigation in our web applications. Let's get started!
The Link component in React Router is used to navigate between different routes in our application. It wraps an HTML a tag, providing additional functionality for managing application-level navigation.
Before we dive into the Link component, let's set up React Router in our project. If you haven't already, install react-router-dom using npm or yarn:
npm install react-router-domor
yarn add react-router-domNow, let's import the Link component and use it in our code.
import { Link } from 'react-router-dom';
// ...
<Link to="/about">About Us</Link>In the example above, we're importing the Link component and creating a link to the /about route, which we'll define later.
to Prop 📝The to prop is used to specify the route that the Link component should navigate to. It expects a string or a Route object.
To define routes, we'll use the Switch and Route components from React Router. Here's an example:
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
function App() {
return (
<Router>
<div>
<Link to="/">Home</Link>
<Link to="/about">About Us</Link>
<Link to="/contact">Contact Us</Link>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</div>
</Router>
);
}
function Home() {
return <h1>Welcome to our homepage!</h1>;
}
function About() {
return <h1>About Us</h1>;
}
function Contact() {
return <h1>Contact Us</h1>;
}
export default App;In the example above, we have three links and three corresponding routes defined using the Route and Switch components. The exact prop on the home route ensures that it only matches the exact path /.
To highlight the active link in our navigation, we can use the useLocation hook and the match.isExact property. Here's an example:
import React, { useEffect } from 'react';
import { Link, useLocation } from 'react-router-dom';
function NavLink({ to, children, ...props }) {
let location = useLocation();
let isActive = location.pathname === to;
useEffect(() => {
if (isActive) {
props.style = {
...props.style,
fontWeight: 'bold',
};
}
}, [isActive, props.style]);
return (
<Link to={to} {...props}>
{children}
</Link>
);
}
// ...
<NavLink to="/" exact>Home</NavLink>
<NavLink to="/about">About Us</NavLink>
<NavLink to="/contact">Contact Us</NavLink>In the example above, we've created a custom NavLink component that highlights the active link based on the current location.
What is the primary purpose of the Link component in React Router?
Happy coding! Let's move on to mastering other components in React JS. Stay tuned for more tutorials on CodeYourCraft. 🚀
Please note that this tutorial is a simplified version of the actual lesson and is intended to give you an idea of the structure and style. For the complete, in-depth tutorial, please visit our website.
This lesson is written for React Router v5. If you're using a different version, some differences may occur.