React's useHistory and Redirect hooks

This tutorial is based on exploring the useHistory hook of react-router-dom which is a special package of react that allows us to make our app navigation robust and efficient.
React router dom allows us to navigate through different pages on our app with/without refreshing the entire component. By default, BrowserRouter in react-router-dom will not refresh the entire page however in a scenario where you want your app to refresh on clicking any link or button then you can set the forceRefresh attribute to true inside the BrowserRouter of react-router-dom as follows:

<BrowserRouter forceRefresh={true} />

Let's create a simple react app using npx create-react-app myapp and install react-router-dom using the following command inside the terminal of our app:

npm i react-router-dom

Now we will create a components folder in src diretory of our app and create following three components:

• Home.js
• About.js
• ContactUs.js

We will import these components in App.js in the following manner:

import React from 'react'
import './App.css';
import { BrowserRouter, BrowserRouter as Router,Redirect, Switch ,Route,Link} from 'react-router-dom';
import {Home} from './components/Home'
import {About } from './components/About'
import {ContactUs} from './components/ContactUs'
import {NotFound} from './components/NotFound'


function App() {
  return (
    <BrowserRouter>
<div className="App">
   <h1>React Router Demo</h1>
   <div className="navbar">
   <Link to="/">Home</Link>
   <Link to="/contact">Contact Us</Link>
   <Link to="/about">About</Link>
   </div>


   <Switch>
     <Route exact path="/">
       <Home />
     </Route>
     <Route path="/contact">
    <ContactUs />
     </Route>
     <Route path="/about">
       <About />
     </Route>
     <Route path="*"><NotFound /></Route>
   </Switch>
    </div>
    </BrowserRouter>

  );
}

export default App;

For each component, we have defined a Link specifying the path and route, also we have defined a * path which will render the 'Not Found' component in case a random and undefined path is defined.

Now suppose, one of the routes for example 'Contact Us' is a protected route and you need to redirect the user to that component only if they have logged in to your app otherwise they will be redirected back to the homepage, so for this purpose we will create a login button on App.js file which will be false by default but clicking on it will login the user. We will also declare a useState hook where we will keep track of the state of the login button:

const [login,setLogin] = useState(false);
<button onClick={()=>setLogin(!login)}>{login ? "Login" : "Log out"}</button>

And in the ContactUs component, we can define the redirect path based on the value of login button as follows:

<Route path="/contact">
{login ? <ContactUs /> : <Redirect to="/" />}
</Route>

Now, you can see if the user is logged in, only then they can visit the Contact Us page otherwise they will be redirected to the homepage.
Another way of doing this is through the useHistory hook.
In the Contact Us component, we will pass the login prop and depending on the value of login, we will let the history.push method render the correct component in the following manner:

import React from 'react'
import { useHistory, useEffect } from 'react-router-dom'

export const ContactUs = ({login}) => {
    const history = useHistory();

    useEffect(()=>{
        if(!login){
            history.push("/")
        }
},[login,history]);

    return (
        <div>
            This is the Contact Us Page
        </div>
    )
}

Also, remember to make the Contact Us route on App.js a normal route before importing useHistory in the respective component:

<Route path="/contact">
    <ContactUs login={login}/>
     </Route>

This was a simple explanation of Redirect and useHistory from react, hope you find it useful.

If you are looking for a learning experience that makes you a professional developer with hands-on coding skills, join one of the best courses here

Happy coding...