Explore React Navigation: A Guide to React Router

Why should you use React Router?
Check it out!

First, let's understand some terminology...

Routes: These are defined paths (URLs) that lead us to the components of your app, such as "/home," "/about," and "/login."

Router: It helps in matching the requested URL with the defined routes and renders the appropriate contents of the web page.

React Router helps users navigate through different pages of the web without reloading the entire page.

Your app is like home, components are your rooms, and React Router is like a map of your house, helping you navigate your house without moving you out of it.

React Router has two special components for navigation.

1. Link: The Link component is a basic navigation component that creates a hyperlink to navigate to a specific route.
2. NavLink: It is an extension of Link that provides a special feature called "active," allowing us to check whether the page is active or not using the isActive prop. You can style it accordingly.

For example, isActive will check if you are on the "/about” page. If you are on that page, it will turn orange; otherwise, it will change to gray.