web-dev-qa-db-fra.com

Comment envoyer des paramètres dans useHistory of React Router Dom?

J'utilise React Router hooks for navigation useHistory.

Naviguer: history.Push("/home", { update: true });

Chez moi: j'essaye d'obtenir des paramètres let {update} = useParams();

Mais update est toujours indéfini. Quel est le problème avec ce code. Aucune suggestion ?

reactjsreact-hooksreact-router-dom
2
Kais

Le deuxième paramètre de la méthode history.Push() est en fait connu sous le nom d'état d'emplacement,

history.Push(path, [state])

Comme indiqué sur le React-Router documentation , vous pouvez accéder à l'état en accédant aux accessoires location. Dans votre cas, pour obtenir la valeur de update,

this.props.location.update
2
wentjun

Si vous utilisez React Hooks suivez cette méthode parce que this.props n'est disponible que dans React Class.

Composant un:

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

const ComponentOne = () => {
    const history = useHistory();
    const handleSubmit = () => {
        history.Push('/component-two',{params:'Hello World'})
    }
    return (
        <div>
            <button onClick={() => {handleSubmit()}}>Fire</button>
        </div>
    )
}

Deuxième composante:

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

const ComponentTwo = () => {
    const location = useLocation();
    const myparam = location.state.params;
    return (
        <div>
            <p>{myparam}</p>
        </div>
    )
}
0
Saqy G

C'est comme ça que tu peux passer

history.Push("/home", { update: true });

et accédez comme ceci s'il s'agit d'un composant sans état.

props.location.update;

si composant basé sur la classe.

this.props.location.update;
0
Vahid Akhtar