The useRouteMatch Hook takes in a path as an argument and returns a corresponding match object. With the useRouteMatch Hook, it’s easier and more convenient to access the match object. If you were using an earlier version of React Router, you’d have to use the route’s props or render props. In Reach Router, to access the match object of a Route, you’d have to use the Match component. With React Router v4, our code would look similar to the following: function HomeButton( from 'react-router-dom' Let’s say we wanted to programmatically navigate to a route called home using a button. To access the history object in React Router v4, you had to use the history prop.

The history object allows for programmatic navigation between routes in your React apps. The useHistory Hook gives you access to the history instance from the history package, one of React Router’s major dependencies. Migrating from Reach Router to the new Hooks-based API.Updates to the Link and NavLink components.In this article, I’ll talk about the newest features in React Router, compare Reach Router and React Router to the new Hooks-based API, and briefly discuss how to migrate to this API. He also stated that React Router would be the surviving project, while Reach Router will continue to receive support in the form of bug fixes.įast-forward to September 2019, and React Router v5.1 was eventually released this version is an introduction to the new Hooks-based API and comes with some amazing features. In May of 2019, Ryan Florence, co-creator of React Router and Reach Router, announced the impending release of a new version of React Router that takes advantage of React’s Hooks API. React Router v6: The future of Reach Router and React RouterĮditor’s note: This post was last updated on 30 December 2021 to include information about React Router v6. Yusuff Faruq Follow Frontend web developer and anime lover from Nigeria.

React router dom url params