Route Components and Route, Link, and NavLink in React JS

In React applications, managing navigation and routing between different views is essential for creating Single-Page Applications (SPAs). React Router is the library used for this purpose. It allows for declarative routing and facilitates navigation within a React app without requiring a page reload. In this article, we will dive into the key components of React Router: Route, Link, and NavLink, and explain their usage in routing.

Understanding React Router Components

React Router includes a set of components that allow you to define routes and handle navigation in your application. The most commonly used components are:

  • Route: Defines a mapping between a URL path and a component.
  • Link: Creates navigation links to different routes without refreshing the page.
  • NavLink: Similar to Link, but provides additional features like styling the active route.

Setting Up React Router

To use React Router, you first need to install it in your React project. If you haven't already installed it, use npm or yarn:

          
              npm install react-router-dom

1. Using the Route Component

The Route component is used to define routes in your application. It associates a URL path with a specific component. When the URL matches the path, React will render the component specified in the component or render prop.

Example: Basic Routing with Route

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

              function Home() {
                  return 
Home Page
;
              }

              function About() {
                  return 
About Page
;
              }

              function App() {
                  return (
                      
                          

                          
                          
                      
                  );
              }

              export default App;

In this example:

  • The Route component renders the Home component when the path is "/" and the About component when the path is "/about".
  • exact ensures that the route matches exactly the specified path.
  • Link is used for navigation between routes without page reloads.

2. Using the Link Component

The Link component is used to create links for navigation. Unlike regular anchor tags (<a>), Link prevents full page reloads and updates the URL dynamically, maintaining the single-page application behavior.

Example: Navigation with Link

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

              function Home() {
                  return 
Home Page
;
              }

              function About() {
                  return 
About Page
;
              }

              function App() {
                  return (
                      
                          

                          
                          
                      
                  );
              }

              export default App;

In this example, the Link component creates links that users can click to navigate between the Home and About pages without refreshing the browser.

3. Using the NavLink Component

NavLink is similar to Link but with additional functionality to apply active styles when the route is active. This is especially useful when building navigation menus that highlight the current page.

Example: Navigation with NavLink

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

              function Home() {
                  return 
Home Page
;
              }

              function About() {
                  return 
About Page
;
              }

              function App() {
                  return (
                      
                          

                          
                          
                      
                  );
              }

              export default App;

In this example:

  • NavLink is used instead of Link to create links.
  • activeClassName="active" is applied to the link when the route is active. This class can be used to style the active link differently (such as adding a different color).

Conclusion

React Router provides an intuitive way to manage navigation in React applications. By using the Route, Link, and NavLink components, you can define routes, create navigation links, and highlight the active route in your app.

The main difference between Link and NavLink is that NavLink provides additional features for styling active links, making it perfect for navigation menus and ensuring that users can always see which page is currently active.

By mastering these components, you can build powerful and interactive single-page applications with React Router, making your React apps easy to navigate and use.




Advertisement