NavLink in React | The Complete React Course | Ep.44

Introduction

This tutorial will guide you through using NavLink in React, a powerful tool for creating navigation elements in your web applications. Understanding how to implement NavLink is essential for building single-page applications (SPAs) that require seamless navigation without page reloads.

Step 1: Setting Up Your React Environment

Before you can use NavLink, you need to ensure your React environment is ready.

1. Create a New React App (if you haven't already):

   • Use the command:

     npx create-react-app my-app
     

   • Navigate to your app directory:

     cd my-app
     

2. Install React Router:

   • Run the following command to add React Router to your project:

     npm install react-router-dom
     

Step 2: Importing NavLink

Now that your environment is set up, you need to import NavLink from React Router.

1. Open your main component file (e.g., App.js).
2. Import NavLink:

   import { NavLink } from 'react-router-dom';
   

Step 3: Setting Up the Router

To use NavLink effectively, you need to set up a router in your application.

Wrap your application in BrowserRouter

• Modify your App.js like this:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
    return (
        <Router>
            <div>
                {/* Navigation links will go here */}
                <Switch>
                    {/* Define your routes here */}
                </Switch>
            </div>
        </Router>
    );
}

Step 4: Creating Navigation Links

Now, you can create navigation links using NavLink.

1. Add NavLink Components:

   • Inside the Router, add NavLink for each route:

   <NavLink to="/" exact activeClassName="active-link">Home</NavLink>
   <NavLink to="/about" activeClassName="active-link">About</NavLink>
   

2. Understanding the Properties:

   • to: Specifies the path to navigate to.
   • exact: Ensures that the link only matches if the path is an exact match.
   • activeClassName: Defines the class to be applied when the link is active.

Step 5: Defining Routes

You need to define the routes that correspond to the NavLinks.

1. Add Route Components:

   • Still within the <Switch>, add:

   <Route path="/" exact component={Home} />
   <Route path="/about" component={About} />
   

2. Create the Component Files:

   • Ensure you have Home.js and About.js components created. Example for Home.js:

   const Home = () => <h1>Home Page</h1>;
   export default Home;
   

Step 6: Styling Active Links

To enhance user experience, style the active links.

1. Add CSS for Active Links:

   .active-link {
       color: red; /* Or any preferred color */
       font-weight: bold;
   }
   

2. Include this CSS in your application to see the changes.

Conclusion

In this tutorial, you learned how to set up and use NavLink in React for easy navigation within your applications. You covered the setup of your React environment, the integration of React Router, and creating dynamic navigation links.

Next Steps

Explore more advanced features of React Router, such as nested routes and route parameters, to enhance your application's navigation capabilities. Additionally, consider looking into state management to handle dynamic data across your routes.