React-Router-Dom v6

What is React-router-dom v6?

React Router DOM is a library for handling routing in React applications. Routing refers to the navigation of different pages or views within a single-page application (SPA) without causing a full page reload. React Router DOM provides a set of components that help you define the navigation structure of your React application.

Key components provided by React Router DOM include:

1. BrowserRouter: A component that uses HTML5 history API to keep UI in sync with the URL. It provides the foundation for routing in a React application.

2. Route: A declarative way to render UI components based on the URL. It defines a mapping between the URL and the React component you want to render when the URL matches.

3. Switch: A component that renders only the first Route or Redirect that matches the current location. This is useful when you want to render a single matching route and ignore the others.

4. Link: A component that provides a declarative way to navigate to a specific route. It creates hyperlinks to navigate between different views in your application.

5. NavLink: Similar to Link, but allows you to add styles to the link based on whether the route is active or not. This is useful for highlighting the current navigation link.

The topics covered in the CodeSandbox link mentioned below are as follows:

Code-link : https://codesandbox.io/p/sandbox/react-router-v6-gzcqhs

1. Basic routing using BrowserRouter, Link, Routes & Route etc

2. Invalid route handling

3. Pass params to url and fetch the same in component

4. Use of Navlink by replacing link

5. Add styling to Active link

6. Search params from url

7. Navigate Programetically

8. Nested routing

9. Protected route

10. Role based routing

Why new version introduced i.e V6?

React Router version 6 introduces several powerful new features, as well as improved compatibility with the latest versions of React. It also introduces a few breaking changes from version 5.

Why anchor tag not used in react routing?

In React routing, anchor tags (<a>) are generally not used for navigation to prevent full page reloads. React applications are single-page applications (SPAs), and using anchor tags would reload the entire page, negating the benefits of a dynamic and fast user experience. Instead, React Router components like Link are preferred, as they update the URL and manage the rendering of components without triggering a full page refresh, maintaining the SPA behavior and improving performance.

Link vs NavLink

• NavLink allows the addition of custom styles and classes.

• NavLink enables the utilization of an active link feature.

• Styling is not recommended when using the Link.

What is Nested-route?

• Embed a route within a route.

• Create tabs or pages within a page.

• Multiple nested routes are also achievable.

Some Important Hooks used in React-router-dom

• useParams: Retrieves parameters from the URL, providing access to dynamic values in the route.

• useSearchParams: Manages and extracts query parameters from the URL, facilitating interaction with search parameters.

• useNavigate: Empowers programmatic navigation, allowing dynamic redirection in response to user actions or events.

• useLocation: Retrieves information about the current URL, including pathname, search, and state, aiding in dynamic route handling.

Hash Route vs Browser Route

• Browser route is the preferred choice in most cases.

• Hash route is employed to conceal routing information from the server.

• Example of Browser route: localhost:3000/about

• Example of Hash route: localhost:3000#about