What is the best way to redirect a page using React Router? [closed]

by

Actually it depends on your use case.

1) You want to protect your route from unauthorized users

If that is the case you can use the component called <Redirect /> and can implement the following logic:

import React from 'react'
import  { Redirect } from 'react-router-dom'

const ProtectedComponent = () => {
  if (authFails)
    return <Redirect to='/login'  />
  }
  return <div> My Protected Component </div>
}

Keep in mind that if you want <Redirect /> to work the way you expect, you should place it inside of your component’s render method so that it should eventually be considered as a DOM element, otherwise it won’t work.

2) You want to redirect after a certain action (let’s say after creating an item)

In that case you can use history:

myFunction() {
  addSomeStuff(data).then(() => {
      this.props.history.push('/path')
    }).catch((error) => {
      console.log(error)
    })

or

myFunction() {
  addSomeStuff()
  this.props.history.push('/path')
}

In order to have access to history, you can wrap your component with an HOC called withRouter. When you wrap your component with it, it passes match location and history props. For more detail please have a look at the official documentation for withRouter.

If your component is a child of a <Route /> component, i.e. if it is something like <Route path="/path" component={myComponent} />, you don’t have to wrap your component with withRouter, because <Route /> passes match, location, and history to its child.

3) Redirect after clicking some element

There are two options here. You can use history.push() by passing it to an onClick event:

<div onClick={this.props.history.push('/path')}> some stuff </div>

or you can use a <Link /> component:

 <Link to='/path' > some stuff </Link>

I think the rule of thumb with this case is to try to use <Link /> first, I suppose especially because of performance.

More Related Contents:

  1. Use history.push in action creator with react-router-v4?
  2. Programmatically navigate using React router
  3. Programmatically Navigate using react-router
  4. React-router-v6 access a url parameter
  5. Component does not remount when route parameters change
  6. React.createElement: type is invalid — expected a string
  7. why do you need to bind a function in a constructor
  8. react-router-dom v6 useNavigate passing value to another component
  9. Attach Authorization header for all axios requests
  10. Can I dispatch an action in reducer?
  11. Handling async request with React, Redux and Axios?
  12. What is withRouter for in react-router-dom?
  13. How do you programmatically update query params in react-router?
  14. How to sync Redux state and url hash tag params
  15. react-router vs react-router-dom, when to use one or the other?
  16. Using React-Router with a layout page or multiple components per page
  17. Target Active Link when the route is active in Next.js
  18. How do I avoid ‘Function components cannot be given refs’ when using react-router-dom?
  19. React: Parent component re-renders all children, even those that haven’t changed on state change
  20. Error: useHref() may be used only in the context of a component. It works when I directly put the url as localhost:3000/experiences
  21. React App goes blank after importing React-Router-Dom
  22. Pass object through Link in react router
  23. Automatic redirect after login with react-router
  24. Passing values through React-Router v4
  25. My Redux state has changed, why doesn’t React trigger a re-render?
  26. How to generate sitemap with react router
  27. How to create dynamic route in gatsby
  28. How to go back to previous route in react-router-dom v6
  29. React Router V6 – Error: useRoutes() may be used only in the context of a component
  30. How to remove the hash from the url in react-router

Leave a Comment