通过 react-router <Link /> 传递道具的最佳做法是什么?
What is a best practice to pass props through react-router <Link />?
我用的是react-router4。我想通过 Link
组件将几个道具传递给我的表单组件之一以初始化状态。我找到了两种方法:
通过 state
传递。
<Link to={{pathname:'/orders/', state:{prop1: 'p1', prop2: 'p2', prop3: 'p3'}}} />
并通过查询参数将其路径更改为 url 至 /orders/:prop1/:prop2/:prop3
<Link to='/orders/p1/p2/p3' />
React 充满了最佳实践和如何正确使用它的建议。我想知道有没有关于如何通过 <Link />
组件传递道具的建议。
我什么时候应该使用查询参数以及什么时候使用状态?
这在某种程度上取决于您正在构建的应用程序类型以及在导航到下一个组件时您是否已经拥有所有必需的 props
?
例如,如果某个应用依赖于外部 api 来获取订单详细信息。在 orders
页面上,我更喜欢使用 <Link to='/orders/1235' />
并根据收到的 pathname
获取订单号。原因是因为在 orders
页面中,我还没有关于 orderId 1235
的所有详细信息。
在大多数情况下,我通过 state
使用 pass 通常只切换 UI。
<Link to={{pathname:'/home/', state:{newUser: true} }}/>
所以在我的组件中,我有一些东西可以检查是否 newUser
,我会显示一个说明横幅。
我用的是react-router4。我想通过 Link
组件将几个道具传递给我的表单组件之一以初始化状态。我找到了两种方法:
通过 state
传递。
<Link to={{pathname:'/orders/', state:{prop1: 'p1', prop2: 'p2', prop3: 'p3'}}} />
并通过查询参数将其路径更改为 url 至 /orders/:prop1/:prop2/:prop3
<Link to='/orders/p1/p2/p3' />
React 充满了最佳实践和如何正确使用它的建议。我想知道有没有关于如何通过 <Link />
组件传递道具的建议。
我什么时候应该使用查询参数以及什么时候使用状态?
这在某种程度上取决于您正在构建的应用程序类型以及在导航到下一个组件时您是否已经拥有所有必需的 props
?
例如,如果某个应用依赖于外部 api 来获取订单详细信息。在 orders
页面上,我更喜欢使用 <Link to='/orders/1235' />
并根据收到的 pathname
获取订单号。原因是因为在 orders
页面中,我还没有关于 orderId 1235
的所有详细信息。
在大多数情况下,我通过 state
使用 pass 通常只切换 UI。
<Link to={{pathname:'/home/', state:{newUser: true} }}/>
所以在我的组件中,我有一些东西可以检查是否 newUser
,我会显示一个说明横幅。