diff --git a/packages/@sanity/desk-tool/src/contexts/PaneRouterContext.js b/packages/@sanity/desk-tool/src/contexts/PaneRouterContext.js
index 8b5aaad9657..c7183259b01 100644
--- a/packages/@sanity/desk-tool/src/contexts/PaneRouterContext.js
+++ b/packages/@sanity/desk-tool/src/contexts/PaneRouterContext.js
@@ -1,5 +1,5 @@
/* eslint-disable react/no-multi-comp, react/prop-types */
-import React from 'react'
+import React, {useContext} from 'react'
import {isEqual, pick, omit} from 'lodash'
import {StateLink} from 'part:@sanity/base/router'
@@ -15,49 +15,6 @@ const missingContext = () => {
export const exclusiveParams = ['view']
-const ChildLink = React.forwardRef(function ChildLink({childId, childPayload, ...props}, ref) {
- return (
-
- {({routerPanesState, groupIndex}) => {
- const panes = routerPanesState
- .slice(0, groupIndex + 1)
- .concat([[{id: childId, payload: childPayload}]])
-
- return
- }}
-
- )
-})
-
-const ParameterizedLink = React.forwardRef(function ParameterizedLink(
- {params: newParams, payload: newPayload, ...props},
- ref
-) {
- return (
-
- {({routerPanesState}) => {
- const panes = routerPanesState.map((group, i) => {
- if (i !== routerPanesState.length - 1) {
- return group
- }
-
- const pane = group[0]
- return [
- {
- ...pane,
- params: newParams || pane.params,
- payload: newPayload || pane.payload
- },
- ...group.slice(1)
- ]
- })
-
- return
- }}
-
- )
-})
-
export const PaneRouterContext = React.createContext({
// Zero-based index (position) of pane, visually
index: 0,
@@ -102,6 +59,40 @@ export const PaneRouterContext = React.createContext({
navigateIntent: (intentName, params, options = {}) => missingContext()
})
+const ChildLink = React.forwardRef(function ChildLink({childId, childPayload, ...props}, ref) {
+ const {routerPanesState, groupIndex} = useContext(PaneRouterContext)
+ const panes = routerPanesState
+ .slice(0, groupIndex + 1)
+ .concat([[{id: childId, payload: childPayload}]])
+
+ return
+})
+
+const ParameterizedLink = React.forwardRef(function ParameterizedLink(
+ {params: newParams, payload: newPayload, ...props},
+ ref
+) {
+ const {routerPanesState} = useContext(PaneRouterContext)
+
+ const panes = routerPanesState.map((group, i) => {
+ if (i !== routerPanesState.length - 1) {
+ return group
+ }
+
+ const pane = group[0]
+ return [
+ {
+ ...pane,
+ params: newParams || pane.params,
+ payload: newPayload || pane.payload
+ },
+ ...group.slice(1)
+ ]
+ })
+
+ return
+})
+
export function getPaneRouterContextFactory(instance) {
let contexts = contextCache.get(instance)
if (!contexts) {