如何在 React-Router 的“Link”组件中传递 Props？

在React-Router的“链接”中传递Props

当React与React-Router一起使用时，你可以使用以下方式将属性传递给新视图 中的修改语法

更新了 React-Router v4 和 v5 中的语法

要在 React-Router v4 和 v5 中传递 props，请使用以下语法：

<Link to={{ pathname: path, query: queryObject, search: searchString }}>
  ...
</Link>

其中：

• pathname 是新视图的路径。
• query 是包含查询参数的对象。
• search 是表示查询字符串，例如 ?foo=bar.

访问目标组件中的 Props

在目标组件中，您可以访问通过使用以下技术进行链接：

withRouter 高阶组件的过时用法：

• 用 withRouter 包装目标组件，它提供对匹配和位置属性：

const NewView = withRouter(OriginalView);

使用钩子的当前实现：

• 在功能组件中使用 useParams 和 useLocation 钩子来访问匹配和位置属性：

const NewView = () => {
  const { testvalue } = useParams();
  const { query, search } = useLocation();

  return (
    <div>
      {testvalue} {query.backUrl}
    </div>
  );
};

示例

考虑以下示例：

App.js：

<Link to={{ pathname: '/ideas/:testvalue', query: { testvalue: 'hello' } }}>Create Idea</Link>

CreateIdeaView.js:

const CreateIdeaView = () => {
  const { testvalue } = useParams();
  console.log(testvalue); // prints 'hello'

  return (
    <div>{testvalue}</div>
  );
};

在此示例中，单击“创建创意”链接会将值为 hello 的属性 testvalue 传递给 CreateIdeaView 组件。

注意：

• Link 组件中的路径应包含参数占位符，例如path: '/ideas/:testvalue'。
• useParams 钩子返回一个包含路径中定义的所有参数的对象。
• useLocation 钩子返回一个包含当前位置信息的对象，包括查询和搜索。
• 查询是一个包含键值对的对象，而搜索字符串包含整个查询字符串。

以上是如何在 React-Router 的“Link”组件中传递 Props？的详细内容。更多信息请关注PHP中文网其他相关文章！