Where useNavigate is called matters!

Recently, I found out useNavigate from react-router can be mysterious. When I tried calling it in different component level, it will give me different results. I never knew why until I dig a little deeper.

Disclaimer: This is based on my experience and my findings has the possibility to be inaccurate.

There are two important aspects that is to be highlighted in this topic:

1. Where you called it matters

There are two scenarios:

• When useNavigate is called at the page component level

const navigate = useNavigate() // this is located in the parent component file

<Parent>
	<Button onClick={()=> navigate("about")} />
</Parent>

Imagine if the user is at the some page and the current path is /some-page. When the user click the button, it will navigate the user to the about page and the path would be /about. The path is changed instead of being append on the existing path.

However,…

• When useNavigate is called at the child component which within the page component

const navigate = useNavigate() // this is located in the child component file

<Child>
	<Button onClick={()=> navigate("about")} />
</Child>

// Then later on being imported into Parent component
<Parent>
	<Child />
</Parent>

Imagine if the user is at the some page and the current path is /some-page. When the user click the button, it will not navigate the user correctly to the about page. It will either navigate the user to a blank page or a 404 page depending on the configuration as the path would be /some-page/about. The path is appended instead of being changed.

2. How you called it matters (only in child components)

Now you might be wondering. If method mentioned in point 1 for child component does not work, how can one navigate the user to the correct page? Fortunately, this can solved if the syntax is wrote differently. Instead of navigate("about"), developers can add a “/” into the payload leading to the following syntax navigate("/about"). This will make sure the user is navigated to the about page as it will change the path instead of appending on the existing path name.