React : comment faire une redirection (redirect) avec onClick vers une autre page ?

Le framework React impose par sa structure une façon d'écrire très différente d'un code qui le serait en JavaScript standard. Vous devez apprendre de nouvelles notions propres au framework, car le code HTML devient du code React. La gestion des redirections notamment est différente. On ne peut plus s'appuyer sur les attributs HTML et simplement définir une URL, car le framework ne change pas les URL. Vous devez structurer le code au sein de votre composant et utiliser les nouvelles fonctionnalités du langage JavaScript.

Le framework React est conçu pour pouvoir s'exécuter sur une application monopage. Comme le code est entièrement en JavaScript, il n'y a pas besoin de changer de page pour exécuter du code sur le serveur, tout est géré avec des appels AJAX. Pour gérer le changement d'URL, on utilise l'API JavaScript "History". Cette API permet de manipuler l'historique du navigateur. On peut ainsi lui envoyer une nouvelle page pour lui faire croire que l'URL a changé, grâce à la méthode "push()". Le framework React possède sa propre interface de gestion pour gérer l'historique et plus généralement les redirections, "React Router".

Avec la version 5 de "React Router", la fonction "useHistory()" retourne un objet permettant de manipuler l'historique du navigateur. Dans votre composant, vous devez créer une fonction qui va effectuer la redirection et la stocker dans un attribut. Cet attribut va ensuite être appelé entre accolades lors de l'affichage avec la méthode "render()".

import { useHistory } from 'react-router-dom',
class redirection extends Component {

  faireRedirection=()=> {
    let url = "maNouvelleURL",
    let history = useHistory(),
    history.push(url),
  }

  render() {
    return (
        <Button color="primary" className="px-4"
            onClick={this.faireRedirection}
            >
              Mon Bouton va rediriger sur "maNouvelleURL" si on clique dessus
        </Button>
    ),
  }
}
export default redirection,

On peut également, dans la version 5, utiliser une nouvelle fonctionnalité de React, les Hooks. Le code va pouvoir ainsi être stocké directement dans une fonction que l'on pourra réutiliser si besoin.

import { useHistory } from "react-router-dom",
function redirection() {

  const history = useHistory(),
  const faireRedirection = () =>{ 
    let url = "maNouvelleURL",
    history.push(url),
  }

  return (
      <Button color="primary" className="px-4"
            onClick={faireRedirection}
            >
              Mon Bouton va rediriger sur "maNouvelleURL" si on clique dessus
        </Button>
  ),
}
export default redirection,

Si vous utilisez la version de 4 de l'API "React Router", le code diffère un peu. Vous devez associer votre fonction de redirection à un attribut dans le constructeur du composant. L'import de l'API n'est pas le même et l'objet "History" est directement une propriété du composant. L'export à effectuer à la fin utilise directement une fonction, "withRouter()". Le code HTML est par contre le même qu'avec la version 5.

import { withRouter } from 'react-router-dom',

class Redirection extends Component {
  constuctor() {
    this.faireRedirection = this.faireRedirection.bind(this),
  }

  faireRedirection() {
    let url = "maNouvelleURL",
    this.props.history.push(url),
  }

  render() {
    return (
      <div className="app flex-row align-items-center">
        <Button color="primary" className="px-4"
            onClick={this.faireRedirection}
            >
              Mon Bouton va rediriger sur "maNouvelleURL" si on clique dessus
        </Button>
    ),
  }
}
export default withRouter(Redirection),

JavaScript