Navigate back to the homepage

How to use history in reactjs functional component?

Infinitbility
React
March 13th, 2022 · 1 min read
keep affilitate

Hello Friends 👋,

Welcome To Infinitbility! ❤️

This tutorial will help you to use react-router in your react.js functional component, basically, we pass history from props and use it in the functional components.

But we have a better way to use history screen navigation in the function component.

In this tutorial example based on react-router-dom package.

React router dom provides useHistory() method to use history without passing from props.

let do example of useHistory() in react functional component.

1import { useHistory } from 'react-router-dom';
2
3const App = () => {
4 const history = useHistory();
5
6 const redirect = () => {
7 history.push('/login');
8 }
9
10 return (
11 <div>
12 <h1>Hi there!</h1>
13 <button onClick={redirect}>Log in</button>
14 </div>
15 );
16};

After importing the useHistory() method and store in veriable, we have the same syntax to navigate the diferant screens like below.

1history.push('/login');

If in case useHistory() method not working for you try useNavigate() method.

Thanks for reading…

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

melio affilitate

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo Photoshop Guide

Tutorials

Categories

More articles from Infinitbility

How to filter array of objects with another array of objects in javascript?

Example of filter array of objects by another array of objects in javascript.

March 12th, 2022 · 1 min read

How to use for loop in typescript?

TypeScript, all types of for loops examples.

March 11th, 2022 · 1 min read
© 2020–2022 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]