As the name suggests these are the 2 hooks mainly used for navigation functionality in reactjs, as these are router related functionalities these are bundled inside react-router-dom library.

useLocation() hook:

How to use useLocation hook?

Inorder to use it in application at first we have to import it from the react-router-dom library and then get location object from useLocation hook as shown below.

// importing useLocation hook from react-router-dom
import { useLocation } from 'react-router-dom' 

// getting location object from useLocation hook
const location = useLocation();

ok, now we saw how to get object from useLocation hook, now let's see what and all data we get in location object.

1. Pathname : This is the current url of the site

2. Key : This is the unique key of the location

3. Search : In this we find the search parameters/query string passed.

4. Hash : This one is the hash fragment of the URL.

5. State : This is the state value set for the location, this is set by <Link state> or using navigate()

Now we know what and all data we get from the location object, let's see what and all are the property names and how to get those from location object, one way we can access these data is by accessing the property, second way is by destructuring the location object.

const location = useLocation();

// by accessing property
const path = location.pathname;
const key = location.key;
const params = location.search;
const hash = location.hash;
const state = location.state

// by destructuring
const { pathname, key, search, hash, state } = location;

Use Cases of useLocation hook:

1. Suppose we have to show some data based on path name then we can use the pathname data from the location object.

2. Key is used to hold the unique identifier from the current url

3. Search parameter is used when we navigate to a particular page and in that page if we want to search for some data then we can pass that data from the previous page as search parameter and access in current page using search property of location object and do the required operation.

4. Hash can be used for navigation within the page, as it helps to render the content without page refresh. It helps the application to aware of the current state inside the page.

5. State is used to get the value set is state of that location, this can be passed while navigating from other page and value can be used in new page for further operations.

useNavigate() hook:

To use it in any application at first we have to import it from the react-router-dom library and then get navigate function from useNavigate hook as shown below.

// importing useNavigate hook from react-router-dom
import { useNavigate } from 'react-router-dom' 

// getting navigate function from useLocation hook
const navigate = useNavigate();

Once we get navigate function we can use that to navigate between different pages, It also accepts some options to control the behaviour of navigation, as shown below

<button onClick={()=>navigate('/second-page', { replace : true })}>
    Goto
</button>

Here I have navigated to path '/second-page', for cleaner code we can extract this action to seperate function also. Here I have provided option { replace : true } which means in history stack replace the current URL itself don't add on top of the current history list.

Similarly we can also pass 'state' which can be accessed using useLocation hook and used in new page. This can be done as shown below.

<button onClick={()=>navigate('/second-page', { state: { value:'first'  }})}>
    Goto
</button>

Conclusion

So in react useLocation and useNavigate are the 2 powerful hooks to handle navigation functionalities, using useLocation we can access certain values and use them for further operations and useNavigate will help in navigating between different pages with some options which helps in efficient navigation functionality.