Qual è il modo migliore per reindirizzare una pagina utilizzando React Router?

Sono nuovo di React Router e apprendo che ci sono tanti modi per reindirizzare una pagina:

1. Utilizzando browserHistory.push("/path")

   import { browserHistory } from 'react-router';
   //do something...
   browserHistory.push("/path");

2. Utilizzando 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
   }

3. In React Router v4, c'è this.context.history.push("/path")e this.props.history.push("/path"). Dettagli: come passare alla cronologia in React Router v4?

Sono così confuso da tutte queste opzioni, esiste un modo migliore per reindirizzare una pagina?

In realtà dipende dal tuo caso d'uso.

1) Vuoi proteggere il tuo percorso da utenti non autorizzati

In tal caso è possibile utilizzare il componente chiamato <Redirect />e implementare la seguente logica:

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

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

Tieni presente che se vuoi <Redirect />lavorare nel modo in cui ti aspetti, dovresti posizionarlo all'interno del metodo di rendering del tuo componente in modo che alla fine dovrebbe essere considerato come un elemento DOM, altrimenti non funzionerà.

2) Vuoi reindirizzare dopo una certa azione (diciamo dopo aver creato un oggetto)

In tal caso puoi usare la cronologia:

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

o

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

Per avere accesso alla cronologia, puoi avvolgere il tuo componente con un HOC chiamato withRouter. Quando avvolgi il tuo componente con esso, passa match locatione historypuntella. Per maggiori dettagli, dai un'occhiata alla documentazione ufficiale di withRouter .

Se il componente è un bambino di un <Route />componente, vale a dire se si tratta di qualcosa di simile <Route path='/path' component={myComponent} />, non c'è bisogno di avvolgere il componente con withRouter, perché <Route />passa match, locatione historyal suo bambino.

3) Reindirizza dopo aver fatto clic su un elemento

Ci sono due opzioni qui. Puoi usarlo history.push()passandolo a un onClickevento:

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

oppure puoi usare un <Link />componente:

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

Penso che la regola pratica con questo caso sia provare a usare <Link />prima, suppongo soprattutto a causa delle prestazioni.

Ora con React-Router v15.1e in seguito possiamo useHistoryagganciare, questo è un modo super semplice e chiaro. Ecco un semplice esempio dal blog di origine.

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

function BackButton({ children }) {
  let history = useHistory()
  return (
    <button type="button" onClick={() => history.goBack()}>
      {children}
    </button>
  )
}

Puoi usarlo all'interno di qualsiasi componente funzionale e ganci personalizzati. E sì, questo non funzionerà con i componenti di classe come qualsiasi altro hook.

Scopri di più su questo qui https://reacttraining.com/blog/react-router-v5-1/#usehistory

Puoi anche usare la libreria React router dom 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

Uno dei modi più semplici: usa Link come segue:

import { Link } from 'react-router-dom';

<Link to={`your-path`} activeClassName="current">{your-link-name}</Link>

Se vogliamo coprire l'intera sezione div come link:

 <div>
     <Card as={Link} to={'path-name'}>
         .... 
           card content here
         ....
     </Card>
 </div>

È inoltre possibile Redirectall'interno del Routecome segue. Questo è per gestire percorsi non validi.

<Route path='*' render={() => 
     (
       <Redirect to="/error"/>
     )
}/>