使用路由转换发送数据

您可以使用Link's to object将状态与路由转换一起发送。

反对

可以具有以下任何属性的对象：

• 路径名：表示要链接到的路径的字符串。
• 搜索：查询参数的字符串表示。
• hash：放在 URL 中的散列，例如#a-hash。
• 状态：坚持到该位置的状态。<-- 你需要这个

array.map((each)=>(
  <Link
    to={{
      pathname: `details/${each.id}`,
      state: {
        // whatever you need to send with the route transition
      },
    }}
  >
    <Card props={each}/>
  </Link>
))

接收路由状态

你有几个选择。

1. 现在在功能组件中使用useLocation React 钩子的最简单和更常见的方法。

   const { state } = useLocation();
   

2. 使用withRouter高阶组件装饰组件并注入路由props。

   如果您的组件用withRouter它装饰，则会将当前路由props作为props注入。

    export default withRouter(EachComponent);
   

   state从locationprops访问。

    const { state } = this.props.location;
   

3. 由Route组件直接渲染并接收路由 props。

   如果您的组件直接由 a 呈现，Route则路由props将传递给它。

    <Route path="/details/:id" component={EachComponent} />
   

   state从locationprops访问。

    const { state } = this.props.location;
   

注意：路由状态是瞬态的，这意味着它只存在于从一个路由到下一个路由的转换过程中。如果您直接导航到接收路由，它将没有状态，因为它没有使用提供状态的路由的转换。

您可以使用位置状态或搜索（或查询参数）通过链接传递数据：

<Link
  to={{
    pathname: '/path/to/my/component',
    search: 'id=123&name=foo',
    state: { data: 111 },
  }}
>
  Click Me
</Link>

并在MyComponent（例如钩子）中检索：

const location = useLocation()
const query = new URLSearchParams(location.search)

console.log(location.state)
console.log(query.get('id'))
console.log(query.get('name'))

PS：您还可以制作自定义钩子 -useQuery用于查询参数。

但请注意，如果您/path/to/my/component直接在浏览器中手动输入路径打开路径，则不会有位置状态或查询参数。

并且Internet Explorer 不支持URLSearchParams，如果您还需要支持 IE，可以使用诸如query-string 之类的包。