时间戳

首页 > 解决方案 > 我通过链接（react-router-dom）将道具传递给功能组件，但它说状态是“未定义”

reactjs - 我通过链接（react-router-dom）将道具传递给功能组件，但它说状态是“未定义”

问题描述

我需要将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 ？

状态未定义

标签： reactjs

解决方案

您需要在路线组件分配的地方分配传递道具而不是路线导航

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

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

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

更新

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

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

等于

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

然后只有你可以收到子参数的道具值

代码沙盒

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;

推荐阅读