React Router 5.1+ Hooks

Hello, Guyz I am back with one new exciting thing. it is reactjs Router how can we use React Router 5.1+ Hooks. React Router 5.1 introduced four hooks to implement routing in a function-based way. It is an updated version of React routers navigation

Please note that you need to be using React 16.8+ version to use hooks either built-in or custom third-party hooks including the router hooks.

React Router 5/4 Example Without Hooks

The most significant improvement in v5 is better allaround support for React 16, while maintaining full compatibility with React >= 15. We know that a lot of React Router users are maintaing apps they’ve built over the last few years using various versions of React 15 or 16 and React Router 4, and we are showing our committment to you with this release.

Let’s see how to route a component without in the old way i.e without using hooks.

If you need to map a component named Home as an example to the main path, you simply need to write the following line of code after you import the Route and Home components:

<Route path="/" component={Home} />

Now when you go to the / path, the Home component will be rendered.

The component will be passed various route props such as match, location and history which will allow you to access routing information in your component.

If you need to pass extra props. you’ll have to use the render property insted of component:

<Route path="/" render={({ match }) => <Home match={match} mine={true} />}>

Our Example with React Router 5 Hooks

Now, let’s write our previous example with hooks. We map the Home component to the / path using the following syntax:

<Route path="/">
  <Home />
</Route>

Route props such as match, history or location are not passed to the Home component so we need to use the new router hooks to access these features.

The useHistory Hook

The useHistory hook allows access to the history prop in React Router.

First, you need to import the hook from the react-router-dom package:

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

Next, you can call the hook inside the Home component as follows:

function Home() {
  const history = useHistory();
  return <button onClick={() => history.push('/user')}>User</button>;
}

The useLocation Hook

The useLocation hook enables access to the location prop in React Router that provides the router state and location.

You can use this hook to access the query parameters or the route string.

You need to start by importing the hook as follows:

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

Next, you need to use it inside your component as follows:

function User() {
  const location = useLocation();
  useEffect(() => {

    console.log("Location Info: ", location.pathname. location.search);

  }, [location]);
  return <div>User Info</div>;
}

Each time the location property changes, the location.pathname and location.search will be printed on the console.

Check This also

website designing company in rohini

About Post Author

kishan kumar

administrator

Professional Web Apps and Hybrid Software Developer !! You can ping me if any Web Development or Hybrid Native or Cross-platform Apps Development work. Connect me on info@appfinz.com

See author's posts