Unlock the Power of React Router v6

A New Era of Routing

In May 2019, Ryan Florence, co-creator of React Router and Reach Router, announced the impending release of a new version of React Router that leverages React’s Hooks API. This marked a significant shift towards a more streamlined and efficient routing system.

Introducing the useHistory Hook

The useHistory Hook provides access to the history instance, allowing for programmatic navigation between routes in your React app. With useHistory, you can effortlessly navigate to a specific route using a button, eliminating the need for cumbersome props.

import { useHistory } from 'eact-router-dom';

function HomeButton() {
  const history = useHistory();

  return (
     history.push('/home')}>
      Go home
    
  );
}

Simplifying Navigation with useNavigate

The useNavigate Hook offers an alternative to useHistory, enabling developers to navigate through their app via code. This Hook returns a function that can be used to programmatically navigate to a specific route.

import { useNavigate } from 'eact-router-dom';

function LoginButton() {
  const navigate = useNavigate();

  return (
     navigate('/login', { replace: true })}>
      Log in
    
  );
}

Unleashing the Power of useLocation

The useLocation Hook returns the location object, which represents the current URL. This Hook can be used to access data sent from another route using the location object’s state property. With useLocation, you can easily log out the user’s current page each time they click on a link.

import { useLocation } from 'eact-router-dom';

function LocationLogger() {
  const location = useLocation();

  console.log(location.state);

  return null;
}

Effortless URL Parameters with useParams

React Router v6 introduces the useParams Hook, which returns an object of key-value pairs of URL parameters. This Hook eliminates the need for props and the Match component, making it easier to pass information about a click event through a URL.

import { useParams } from 'eact-router-dom';

function UserPage() {
  const params = useParams();

  return (

Welcome, {params.username}!

  );
}

Accessing the Match Object with useRouteMatch

The useRouteMatch Hook provides an easier way to access the match object, which represents the current route. This Hook takes in a path as an argument and returns a corresponding match object. With useRouteMatch, you can implement nested routing using the url and path properties of the match object.

import { useRouteMatch } from 'eact-router-dom';

function NestedRoute() {
  const match = useRouteMatch('/users/:id');

  return (

  );
}

Updates to the Link and NavLink Components

React Router v6 also brings updates to the Link and NavLink components, including the ability to pass in functions to these components’ to props. This feature enables developers to dynamically generate routes based on the current location.

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

function DynamicLink() {
  return (
     `/users/${currentUser.id}`}>Go to user page
  );
}

What’s New in React Router v6

React Router v6 boasts a smaller bundle size, automatic ranking with the new API, and nested route improvements. Additionally, the new suspense-ready navigate API, useRoutes and matchRoutes, and the useNavigate Hook promise to optimize and streamline your routing system.

• Smaller bundle size
• Automatic ranking with the new API
• Nested route improvements
• Suspense-ready navigate API
• useRoutes and matchRoutes Hooks
• useNavigate Hook

Migrating from Reach Router

If you’re planning to migrate from Reach Router, React Router v6 provides a seamless transition. By following a few simple steps, you can easily migrate to the new Hooks-based API and start enjoying the benefits of cleaner code and improved performance.

1. Update your React Router version
2. Replace Reach Router imports with React Router imports
3. Update your routing code to use the new Hooks-based API