New Features in React Router v5.1.0

There are some awesome new features added in React Router v5.1.0. Hooks are hot topic now and that’s what we are getting in new React Router version.

Lists of Hooks added:

• useParams
• useLocation
• useHistory
• useRouteMatch

userParams: To access current params, we use match prop passed to component like this:

let { id } = match.params;

But we with new hooks, we can just use like this in stateless component

let { id } = useParams();

**We can useParams() anywhere in <Components> or its subtree without manually passing params around**

userLocation: Which returns the current location object

let current_location = useLocation();

userHistory: Use for programmatic navigation purposes.

let history = useHistory();

useRouteMatch: Useful when we are using<Route>just so we can get access to its match data.

let match = useRouteMatch({
    path: '/post/:id/',
    strict: true,
    sensitive: true
  })

Other Updates:

• Add support for forwardRef in <Link>

This allows components like @reach/menu-button to manage focus or do anything else they need to with the underlying DOM element.

• Add support for functions in <Link to> and <NavLink to>
• Add <Link component> API

<Link
     to="/page"
     component={PageView}
     >
        <Text>Page1</Text>
</Link>

For more check React Router releases.