如何使用鈎子在 REACTJS 中的不同 url 中將狀態從一個組件獲取到另一個組件？

Question

例如，Home 組件中有一個輸入標簽和一個提交按鈕。 在輸入標簽中，我輸入我的名字，然后單擊提交我的 url 路徑更改為 /info，在該 url 中我想顯示我在輸入字段中輸入的名稱。

Answer 1

您可以借助 react-router-dom 中的 useHistory 和 useLocation Hooks 來完成此操作。 只需將您的組件初始化到 BrowserRouter Switch 並在要傳遞狀態的組件中導入 useHistory Hook，並在要從提交按鈕接收更新狀態的組件中導入 useLocation。

  <Switch>
    <Route exact path="/form" component={Form} />
    <Route exact path="/data" component={Formdata} />
  </Switch>

以相同的方式將路徑和狀態推入 useHistory 的對象中，以從 useHistory 創建對象的 useLocation 中獲取數據。

import { useState } from "react";
import { useHistory } from "react-router-dom";

const Form = () => {
const [initstate, setInitState] = useState("");
let history = useHistory();
const HandleSubmit = (e) => {
  e.preventDefault();
  history.push("/data", initstate);
};

  return (
    <>
      <form onSubmit={HandleSubmit}>
        <input
          type="text"
          placeholder="text field"
          onChange={(e) => setInitState(e.target.value)}
        />
        <input type="submit" value="Submit" />
      </form>
    </>
  );
};

export default Form;

獲取狀態數據：

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

const Formdata = () => {
  let location = useLocation();

  console.log(location.state);

  return (
    <>
      <p>{location.state}</p>
    </>
  );
};

export default Formdata;