Navigating React.js with useNavigate
Tags: webdev, react, beginners, programming
Published: 2022-10-11 01:46:36

In the process of building my first two end-of-phase projects at Flatiron, I happened upon a handful of terms and concepts outside of my curriculum that proved quite useful.

This was no different in Phase 3, and my project partners and I soon stumbled across a very helpful little React hook called useNavigate. Below I've included a brief overview and a specific use case for the useNavigate hook.

###Under the Hood###

At first glance, useNavigate functions very similarly to its predecessor - useHistory - in that it gives you the ability to navigate programmatically. Prior to React v6, useHistory would hook into React Router's history object and utilize push and replace methods to maneuver to other routers. useNavigate performs similar functionality, but with better compatibility and built-in convenience functions.

Specifically, useNavigate is a hook that affords access to the navigation object. While every screen component in an application is provided with the navigation prop by default, it is often inconvenient or not functional to pass the navigation prop to a child component directly - enter useNavigate!

###useNavigate in Action###

Let's take a look at a specific use case scenario.

To start, we'll set up a React app with the latest version of the react-router-dom installed by running these two terminal commands (if using npm):

```jsx 
npx create-react-app <project_name>
npm install react-router-dom
```

To demo the capabilities of useNavigate, we'll set up a basic App with two components as children of App.js - About & Contact.

Next, we have to import React and useNavigate to every file we plan to use them - in our case, both About.js and Contact.js.

```jsx
import React from 'react';
import { useNavigate } from "react-router-dom";
```

Let's create some boiler-plate code:

```jsx
import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./components/Home";
import Contact from "./components/Contact";
  
function App() {
    
  return (
      <div>
        <Router>
          <Routes>
            <Route exact path="/" element={
              <Home/>
            }/>
            <Route exact path="/about" element={
              <Contact/>
            }/>
          </Routes>
        </Router>
      </div>
    );
}
  
export default App;
```
At the top level, we've imported React Router and set up our various routes.

```jsx
import React from 'react';
import { useNavigate } from 'react-router-dom';

const Home = () => {
    const navigate = useNavigate();

    return (
        <div>
            <h1 style="text-align:center; color:green">The Fellowship of the Ring</h1>
                <ul>
                    <li>Frodo</li>
                    <li>Sam</li>
                    <li>Merry</li>
                    <li>Pippin</li>
                    <li>Aragorn</li>
                    <li>Boromir</li>
                    <li>Legolas</li>
                    <li>Gimli</li>
                    <li>Gandalf</li>
                </ul>
            <button onClick={ () => navigate("/contact")}>Contact</button>
        </div>
    )
};

export default Home;
```
In the Home component, we passed useNavigate a specified route ("/contact"), and then called it inside a click event.

```jsx
import React from 'react';
import { useNavigate } from "react-router-dom"
  
const Contact = () => {
  const navigate = useNavigate();
  
  return (
  <div>
     <h1 style="text-align:center; color:red">To contact:</h1>
        <p>The Council of Elrond</p>
        <p>Rivendell</p>
     <button onClick={()=>navigate("/home")}>Home</button>
  </div>
  )
};
  
export default Contact;
```

In this demo, the useNavigate hook is being used to toggle between a "Home" and "About" page via a button click.

###Further Color###

A few notes about the above code:

The navigate function can be passed two types arguments: 

* A 'to' value (in the same style as the '<Link to>' tag
* A delta to point to a location in the history stack

For example: navigate(-1) is used to redirect the user to the previous page in history, while navigate(1) points them to the next page.

Additionally, the navigate prop has a number of convenient built-in functions. To outline a few:

* reset - replaces the current state with a new route

* goBack - moves back in the stack in history

* setParams - alters the route's params

* setOptions - edits the screen's options

* isFocused - confirms the screen is focused

Overall, a very useful hook with lots of built-in functionality! Happy coding!