Redirect in React JS

There are many different ways to redirect from page to page in React applications:

1. Redirect Component

We can redirect using <Redirect> component by importing it from “react- router-dom” library. This way works in both functional and class components.

2. Use history Hook

This way can be used inside functional components.

3. History prop

Every component that is an immediate child of the <Route> component receives history object as a prop. A common problem is if a component is not an immediate child to <Route> component, there is no history prop present. This way works in both functional and class components.

4. withRouter

withRouter is a function provided in the “react-router-dom” library that helps us access the history prop in components which are not immediate children to the <Route> components. This way works in both functional and class components.

after that we need to wrap our component with withRouter while exporting it.

That’s all for now — Thanks for reading and happy coding!