Believemy logo purple
Connexion
Discussions

react-router v6 : point sur les states

Image

Idem que dans les sessions précédentes, je viens ici en aide aux étudiants pour vous éviter de chercher trop longtemps :)

 

1-

Pour passer un state vous ne devez pas le mettre dans l'objet to, vous devez le passer en paramètre de Link. Si vous le passez dans "to" comme dans la vidéo du cours vous n'aurez pas d'erreur de compilation mais le state ne remontera pas... . Voici comment j'ai fait :

 

import React from "react";
import { Link } from "react-router-dom";

function Home() {
    return (
        <>
            <h1>Acceuil</h1>
            <Link to="/articles/1">Article 1</Link>
            <Link
                to={{
                    pathname: "/articles/1",
                    //hash: '#projets',
                    //search: "?order=new",
                }}
                state={{ fromHome : true }}
                style={{marginLeft:"15px"}}>Lien vers une ancre</Link>
        </>
    )
}

export default Home;

 

 

2-

Pour récupérer le state et vous en servir, vous ne pourrez pas le faire comme dans la vidéo de cours non plus. Il faudra passer par le hook useLocation (pensez à l'importer !) et ensuite vous ciblez le state. Voici comment j'ai procédé :

 

import React from "react";
import { useParams, useLocation } from "react-router-dom"


function Article(props) {

    let getId = useParams(props);
    let getState = useLocation(props);
    console.log(getState);
    return (
        <>
            <h1>Ma page Article ({getId.id})</h1>
            {getState.state && getState.state.fromHome ? <p>Cliqué depuis accueil</p> : null}
        </>
    )
}

export default Article;

 

 

 

 

13 réponses
Image
Loris Daca
Le 03/08/2022 à 16:42

En V6 le composant Redirect devient Navigate

import : import { Navigate } from 'react-router-dom';

utilisation du composant : <Navigate to="/" />

Image
Erika ADB
Le 17/08/2022 à 09:06

Merci beaucoup Raven ! J'ai cherché beaucoup trop longtemps pour une solution aussi simple 

Image
Raven
Le 17/08/2022 à 10:44

Avec plaisir :)

Image
Eric Sermande
Le 29/08/2022 à 14:47
import React from 'react';
import './App.css';
import { Route, Routes, } from 'react-router-dom';
// Composants
import Layout from './HOC/Layout/Layout';
import Home from './Containers/Home/Home';
import Contact from './Components/Contact/contact';
import Articles from './Containers/Articles/Articles';
import Article from './Containers/Articles/Article/Article';

function App() {
	return (
		<div className="App">
			<Layout>
			
				<Routes>
				
					<Route exact path="/" element={<Home />} />
					<Route exact path="/Contact" element={<Contact />} />
					<Route exact path="/articles" element={<Articles />} />
					<Route exact path="/articles/:id" element={<Article />} />
					<Route render={() => <h1>404</h1>} />
					
					</Routes>
			</Layout>
		</div>
	);
}

export default App;
Image
Eric Sermande
Le 29/08/2022 à 14:55 (modifié le 29/08/2022 à 14:59)

bonjour a tous , dans la nouvelle mise a jour de react on utilise plus de Switch, du coup la methode du cour pour creer la page d ' erreur 404 la methode render ne fonctionne plus. quelqu'un aurai une solution sans utiliser le switch. je vous remercie. ci desssus le code du projet blog que je suis entrain d'étudier du coup j ai du adapter le code sans le swich.tout fonctionne sauf la methode render.

Image
Raven
Le 29/08/2022 à 15:33

Salut ! Sur router v6 c'est très simple, tu mets en dernière route ce bloc :

<Route path="*" element={<h1>404</h1>} />

 

Cette route correspond à n'importe quelle URL. Mais comme elle est la dernière, elle a la priorité la plus faible et donc le routeur ne la choisira QUE si aucune route n'a été validée avant.

 

En espérant t'avoir aidé :)

Meilleure réponse
Image
Eric Sermande
Le 29/08/2022 à 16:28

je te remerci infiniement, sa a résolue le soucis 

Image
Louis-Nicolas Leuillet
Le 29/08/2022 à 17:03

Merci Raven je viens d'ajouter ta réponse en meilleure réponse pour toute l'aide que tu as apporté ici !

Image
Benjamin Carriou
Le 15/02/2023 à 16:00

Merci Raven :)
Faudrait refaire cette partie du cours Louis-Nicolas ;)

Image
Louis-Nicolas Leuillet
Le 15/02/2023 à 16:06 (modifié le 15/02/2023 à 16:06)

Je suis en train de refaire tout le cours en entier, mais énormément de boulot pour moi tout seul, ça arrive cette année promis ^^

Image
Benjamin Carriou
Le 15/02/2023 à 16:25

Pas de soucis, le cours est tellement de qualité qu'on ne va pas pleurnicher pour cette partie là qui est à la marge  ;)
Bon courage pour la suite :)

Image
Simon Honoré
Le 06/07/2023 à 20:09

Pour récupérer le state, pas besoin de props : 

function Articles() {
  const { state } = useLocation();
  console.log('state >> ', state);  
  return (
    <div>
      <h1>Articles</h1>
    </div>
  );
};

// state >> { fromHome:true }
Image
Simon Honoré
Le 06/07/2023 à 20:31 (modifié le 06/07/2023 à 20:33)

Si jamais ça peut en aider plusieurs, et même toi Louis-Nicolas pour la refonte ^^

useNavigate() va push la page de rediection. Pour faire un replace facilement avec il faut passer un second argumet, qui est un objet : 

// normal
const navigate = useNavigate();
navigate('/home');
/*
historique : 
- page actuelle
- page souhaitée
- page redirigée
*/

// avec replace
const navigate = useNavigate();
navigate('/home', {replace: true});
/*
historique : 
- page actuelle
- page redirigée
*/
Image
Inscrivez-vous ou connectez-vous pour participer à la discussion.
Discussion résolue
Aide spontanée

Informations

Créée le 5 juillet 2022 15:20
Dernière modification le 5 juillet 2022 15:22
Dernière activité le 6 juillet 2023 20:33
Cours : Créez des sites internet interactifs avec React 16 et Redux