What is the best way to redirect a page using React Router

Question

I am new to React Router and learn that there are so many ways to redirect a page    Using browserHistory push   path    import   browserHistory   from  react-router     do something    browserHistory push   path     Using this context router push   path    class Foo extends React Component       constructor props  context            super props  context             do something              redirect             this context router push   path            Foo contextTypes         router  React PropTypes object    In React Router v4  there s this context history push   path   and this props history push   path    Details  How to push to History in React Router v4    I m so confused by all these options  is there a best way to redirect a page

User · Answer

You can also use react router dom library useHistory;

`
import { useHistory } from "react-router-dom";

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}
`

https://reactrouter.com/web/api/Hooks/usehistory

User · Answer

Now with react-router v15 1 and onwards we can useHistory hook  This is super simple and clear way  Here is a simple example from the source blog    import   useHistory   from  react-router-dom    function BackButton   children        let history   useHistory     return        lt button type  button  onClick       gt  history goBack    gt         children       lt  button gt          You can use this within any functional component and custom hooks  And yes this will not work with class components same as any other hook    Learn more about this here https   reacttraining com blog react-router-v5-1  usehistory

User · Answer

You also can Redirect within the Route as follows  This is for handle invalid routes   lt Route path     render       gt                  lt Redirect to  quot  error quot   gt            gt

User · Answer

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  lt Redirect   gt  and can implement the following logic   import React from  react  import    Redirect   from  react-router-dom   const ProtectedComponent        gt      if  authFails      return  lt Redirect to   login     gt        return  lt div gt  My Protected Component  lt  div gt      Keep in mind that if you want  lt Redirect   gt  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      gt          this props history push   path          catch  error    gt          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  lt Route   gt  component  i e  if it is something like  lt Route path   path  component  myComponent    gt   you don t have to wrap your component with withRouter  because  lt Route   gt  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    lt div onClick  this props history push   path    gt  some stuff  lt  div gt    or you can use a  lt Link   gt  component     lt Link to   path   gt  some stuff  lt  Link gt    I think the rule of thumb with this case is to try to use  lt Link   gt  first  I suppose especially because of performance

User · Answer

One of the simplest way  use Link as follows  import   Link   from  react-router-dom     lt Link to   your-path   activeClassName  quot current quot  gt  your-link-name  lt  Link gt    If we want to cover the whole div section as link    lt div gt        lt Card as  Link  to   path-name   gt                            card content here                     lt  Card gt    lt  div gt

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

Examples related to reactjs

Examples related to redux

Examples related to react-router