Accéder à la page github

Les redirections avec React

Une application contient en général plusieurs pages. Nous verrons comment React gère les redirections entre les pages.

Commençons par créer un nouveau composant qui correspondra à notre page et nous permettra à la fin, d'afficher les informations de nos cryptos monnaie lorsque nous cliquerons sur le bouton.

./src/Infos.jsx

import React from "react"


const Infos = () => {
  return <div>Infos</div>
}


export default Infos

Ce composant n'est pas utilisé par un autre composant, ce qui le rend unique et permet de le traiter comme une page.

Pour faire des redirections en React, nous allons utiliser React router.

Pour l'installer, nous allons aller dans le terminal et importer sa librairie.

Terminal

npm install react-router-dom@6.10.0

A présent, nous avons nos deux pages et le router. Faisons en sorte de povoir switcher entre les deux pages.

Modifions notre fichier App.jsx et donnons la possibilité à notre page de pouvoir aller à la page que nous avons créée.

./src/App.jsx

import { createRoot } from "react-dom/client"
import { useState } from "react"
import SearchFields from "./components/SearchFields"
import Crypto from "./components/Crypto"
import { BrowserRouter, Routes, Route } from "react-router-dom"
import Infos from "./Infos"


const App = () => {
  const [searchValue, setSearchValue] = useState("")
  return (
    <div className="container">
      <BrowserRouter>
        <h1 className="title">Crypto Logos</h1>
        <Routes>
          <Route path="/infos/:id" element={<Infos />} />
          <Route
            path="/"
            element={
              <>
                <SearchFields searchValue={searchValue} setSearchValue={setSearchValue} />
                <Crypto searchValue={searchValue} />
              </>
            }
          />
        </Routes>
      </BrowserRouter>
    </div>
  )
}


const container = document.getElementById("app")
const root = createRoot(container)
root.render(<App />)

Nous avons importé les composants de router dom qui nous permettrons d'effectuer notre redirection et la nouvelle page que nous voulons voir.

A présent nous avons la redirection qui fonctionne. Essayez de vous rendre sur les pages http://localhost:5173/ et http://localhost:5173/infos/BTC. Vous pourrez voir les pages s'afficher.

  • React router a plusieurs paramètres que vous pouvez voir sur leur page. Leur documentation est excellente même si elle est en anglais.

  • Vous avez surement remarqué path="/infos/:id" dans le bout de code que nous avons rajouter dans le fichier App.jsx. Il s'agit de la variable. Dans notre lien, la valeur de id est BTC.

  • A présent, modifier le composant Crypto pour qu'il nous rediriger vers la page avec le code de la Crypto sélectionnée.

./src/components/Crypto.jsx

import ImageBlock from "./ImageBlock"
import useGetImages from "../hooks/useGetImages"
import { Link } from "react-router-dom"


const Crypto = ({ searchValue }) => {
  const [status, cryptos] = useGetImages(searchValue)
  return (
    <div className="ListImageContainer">
      {status !== "loaded" && <div>Chargement....</div>}
      {status === "loaded" &&
        cryptos.map(crypto => (
          <Link to={`/infos/${crypto.currency_code}`}>
            <ImageBlock key={crypto.currency_long} crypto={crypto} />
          </Link>
        ))}
    </div>
  )
}
export default Crypto

Ici nous n'utilisons pas le tag a parce qu'il actualise la page et réimporte les données. Le fait d'utiliser Link permet à React d'interpréter ce que nous souhaitons faire et de juste afficher le nouveau composant sans actualiser toute la page. Ce qui est beaucoup plus rapide.

Maintenant, lorsque nous cliquons sur une des images, nous sommes redirigés vers la page ./infos/BTC par exemple.

Essayer d'afficher le code sélectionné lorsque nous arrivons sur la page. Pour le faire, nous allons modifier le fichier Infos.jsx.

./src/Infos.jsx

import React from "react"
import { useParams } from "react-router-dom"


const Infos = () => {
  const {id}= useParams()
  return <div>{id}</div>
}


export default Infos

  • Le Hooks useParams permet de récupérer les paramètres du router.

Modifier le tag h1 du fichier App.jsx pour pouvoir retourner à la page d'accueil.

./src/App.jsx

...
import { BrowserRouter, Routes, Route, Link } from "react-router-dom"
...
        <Link style={{ textDecoration: "none" }} to="/">
          <h1 className="title">Crypto Logos</h1>
        </Link>
...

A présent, nous avons la possibilité de naviguer de part et d'autres de notre application.

Accéder au fichier du projet pour cette étape

11-Router

  • .eslintrc.json
  • .gitignore
  • .package.json
  • .prettierrc
  • vite.config.js

Aucune sélection

Sélectionner un fichier

Améliorons notre page Info.jsx pour la rendre plus belle et utilisons les données importer par notre API. Identifions la valeur retournée.

./src/Infos.jsx

import React from "react"
import { useParams } from "react-router-dom"
import useGetImages from "./hooks/useGetImages"


const Infos = () => {
  const { id } = useParams()
  const [status, cryptos] = useGetImages(id)
  return status === "loaded" ? (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        marginTop: "2rem",
      }}
    >
      <img src={cryptos[0].link} alt={cryptos[0].currency_long} />
      <div style={{ paddingLeft: "1rem" }}>
        <p>
          Nom long: <b>{cryptos[0].currency_long}</b>
        </p>
        <p>
          Code: <b>{cryptos[0].currency_code}</b>
        </p>
      </div>
    </div>
  ) : (
    <div>Chargement...</div>
  )
}


export default Infos

Vous avez surement remarqué que j'ai utilisé du CSS directement dans notre div. En React, c'est la manière de faire ce qu'on appelle de l'inline CSS.

Vous remarquerez aussi que si nous mettons dans notre lien, un texte qui ne correspond à aucun Code, notre application tombe.

Pour le corriger, nous allons rajouter une condition qui permet de vérifier que la valeur existe avant d'afficher notre composant. Dans le cas, contraire, nous voulons voir apparaître "le code n'existe pas".

Modifions de nouveau notre fichier Info.jsx:

./src/Infos.jsx

import React from "react"
import { useParams } from "react-router-dom"
import useGetImages from "./hooks/useGetImages"


const Infos = () => {
  const { id } = useParams()
  const [status, cryptos] = useGetImages(id)
  return status === "loaded" ? (
    cryptos[0] ? (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          marginTop: "2rem",
        }}
      >
        <div
          style={{
            display: "flex",
            border: "solid 1px #D7D7D7",
            borderRadius: "8px",
            padding: "1rem",
            alignItems: "center",
            backgroundColor: "#F2F2F2",
          }}
        >
          <img src={cryptos[0].link} alt={cryptos[0].currency_long} />
          <div style={{ paddingLeft: "1rem" }}>
            <p>
              Nom: <b>{cryptos[0].currency_long}</b>
            </p>
            <p>
              Code: <b>{cryptos[0].currency_code}</b>
            </p>
          </div>
        </div>
      </div>
    ) : (
      <div>Le code n'existe pas</div>
    )
  ) : (
    <div>Chargement...</div>
  )
}


export default Infos

A présent, nous sommes capables de gérer les erreur en lien avec notre API et la collecte de la données. Il existe plusieurs manières de gérer les erreurs en React.

Accéder au fichier du projet pour cette étape

11-Router-2

  • .eslintrc.json
  • .gitignore
  • .package.json
  • .prettierrc
  • vite.config.js

Aucune sélection

Sélectionner un fichier