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