我通过 Link (react-router-dom) 将props传递给功能组件，但它说状态是“未定义”

IT技术 reactjs
2021-05-05 12:25:58

我需要将id传递给不同的组件。

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

const Option = () => {
  return (
    <section className="section">
      <Link
        to={{
          pathname: "/person",
          state: { id: "12345" },
        }}
      >
        <button class="button is-primary">Click Me</button>
      </Link>
    </section>
  );
};
export default Option;

我访问id的组件

const Person = (props) => {
  let data = useLocation();
  console.log(data);
  return (
    <section className="section has-text-centered mt-4">
      <h1>Hello</h1>
    </section>
  );
};

export default Person;

但我得到的状态为undefined。如何访问我传入的ID？

状态未定义

1个回答

您需要在路由组件分配的地方分配传递props而不是路由导航

将props传递给路由器的参考示例

或者，如果您真的喜欢在 onclick 上传递props。使用useHistory钩子然后传递状态参数

您可以通过props子组件接收状态值

更新

您应该将渲染参数传递给组件，例如

<Route path="/person" render={Person} />

等于

<Route path="/person" render={(params)=><Person {...params}/>} />

那么只有你才能收到子参数上的props值

代码沙盒

import { Link,useHistory } from "react-router-dom";
    
    const Option = () => {
      const history = useHistory();
      function nav(){
         history.push({
          pathname: '/path',
          state: {  // location state
            update: true, 
          },
        });
      } 
      return (
        <section className="section">
            <button class="button is-primary" onClick={nav}>Click Me</button>
        </section>
      );
    };
    export default Option;
其它你可能感兴趣的问题
上一篇在使用 React、Redux 和 Firebase 登录时检查用户的自定义声明（是管理员） 下一篇如何访问其他字段中的字段数据