Logo

Developer learning path

News
React

Navigating between pages using Link and NavLink components in React

Introduction to React
What is React? Advantages of React JSX syntax Setting up the development environment
Components and Props
Components in React Functional Components Class Components Props PropTypes and defaultProps Component composition
State and Lifecycle Methods
State in React setState method Lifecycle Methods in Class Components Conditional Rendering based on the state
Handling Events
Event handling in React Binding Event Handlers Passing Arguments to Event Handlers Conditional Event Handling
Forms and User Input
Forms in React Controlled Components Uncontrolled Components Form Validation
Lists and Keys
Rendering Lists in React Keys Extracting Components with Keys
Components Lifecycle
Understanding Components Lifecycle Mounting, Updating and Unmounting Lifecycle Methods
Working with APIs
Making HTTP Requests with Axios Handling Responses with Promises Asyncawait syntax for making API calls
React Router
What is React Router? Installation Configuring Routes Navigating between pages using Link and NavLink components
Redux State Management
What is Redux Three principles of Redux Redux Store, Actions, and Reducers ReactRedux integration
Styling React Applications
Styling in React Inline styles CSS Modules Styled Components
Testing React Applications
Testing Fundamentals Testing React Components Integration Testing Using Jest and React Testing Library
Deployment and Optimization
Deployment options for React applications Performance Optimization Code Splitting React Lazy and Suspense
Next Steps
Advanced Topics Resources for continued learning Conclusion

Navigating between pages using Link and NavLink components

50

#description

React is a popular JavaScript library used for building dynamic user interfaces for web applications. When it comes to creating a multi-page application, we need to be able to navigate users to different pages within the application. React provides two components for accomplishing this task; Link and NavLink.

Link component is used to navigate between different pages within the application. It is part of the react-router-dom library which provides powerful routing capabilities to React applications.

The syntax for using the Link component is as follows:

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

<Link to='/about'>About</Link>

In the above code, we are importing the Link component from react-router-dom library and using it to create a hyperlink which navigates users to /about page when clicked.

NavLink is a similar component to Link, but with added styling capabilities. It allows you to apply custom styles to the active NavLink which makes it easier for users to understand where they are in the application.

The syntax for using the NavLink component is as follows:

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

<NavLink to='/about' activeClassName='active'>About</NavLink>

In the above code, we are importing NavLink component from react-router-dom library and using it to create a hyperlink like Link. The activeClassName is a prop that can be used to apply custom styling to the active NavLink element.

By using the Link and NavLink components in combination with the react-router-dom library, we can create a seamless multi-page application with easy navigation controls.

March 25, 2023

If you don't quite understand a paragraph in the lecture, just click on it and you can ask questions about it.

If you don't understand the whole question, click on the buttons below to get a new version of the explanation, practical examples, or to critique the question itself.