如何使用钩子在 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;