web-dev-qa-db-ja.com

React Router DomのuseHistoryでパラメータを送信する方法は？

Reactナビゲーション用のルーターフックuseHistoryを使用しています。

ナビゲート：history.Push("/home", { update: true });

家で：パラメータを取得しようとしていますlet {update} = useParams();

ただし、updateは常に未定義です。このコードの何が問題なのですか。助言がありますか ？

reactjsreact-hooksreact-router-dom
2
Kais

history.Push()メソッドの2番目のパラメーターは、実際にはロケーション状態として知られています。

history.Push(path, [state])

React-Router documentation で述べたように、locationプロパティにアクセスすることで状態にアクセスできます。あなたの場合、updateの値を取得するには、

this.props.location.update
2
wentjun

Reactフックを使用している場合、フックはこのメソッドに従いますthis.propsはReact Class。

コンポーネント1：

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>
    )
}

コンポーネント2：

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

これはあなたが合格できる方法です

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

ステートレスコンポーネントの場合は、このようにアクセスします。

props.location.update;

クラスベースのコンポーネントの場合。

this.props.location.update;
0
Vahid Akhtar