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.