diff --git a/.changeset/tender-phones-explain.md b/.changeset/tender-phones-explain.md new file mode 100644 index 00000000000..b95ae585096 --- /dev/null +++ b/.changeset/tender-phones-explain.md @@ -0,0 +1,6 @@ +--- +'@clerk/clerk-react': patch +--- + +Fixes error when path is passed from context and a routing strategy other than `path` is passed as a prop. +This change affects components ``, `` from `@clerk/nextjs` and `@clerk/remix`. diff --git a/packages/react/src/hooks/__tests__/__snapshots__/useRoutingProps.test.tsx.snap b/packages/react/src/hooks/__tests__/__snapshots__/useRoutingProps.test.tsx.snap index 6a3c65cd32b..f9d8f442466 100644 --- a/packages/react/src/hooks/__tests__/__snapshots__/useRoutingProps.test.tsx.snap +++ b/packages/react/src/hooks/__tests__/__snapshots__/useRoutingProps.test.tsx.snap @@ -14,7 +14,17 @@ exports[`useRoutingProps() returns passed props and options if path is passed fr
- {"path":"/aloha","prop1":"1","prop2":"2"} + {"path":"/aloha","prop1":"1","prop2":"2","routing":"path"} +
+
+ +`; + +exports[`useRoutingProps() returns passed props but omits path prop if path is passed from routing options and a routing strategy other than path is specified 1`] = ` + +
+
+ {"prop1":"1","prop2":"2","routing":"virtual"}
diff --git a/packages/react/src/hooks/__tests__/useRoutingProps.test.tsx b/packages/react/src/hooks/__tests__/useRoutingProps.test.tsx index cfed6f065cd..2afcf9065e7 100644 --- a/packages/react/src/hooks/__tests__/useRoutingProps.test.tsx +++ b/packages/react/src/hooks/__tests__/useRoutingProps.test.tsx @@ -71,4 +71,20 @@ describe('useRoutingProps()', () => { ); expect(baseElement).toMatchSnapshot(); }); + + it('returns passed props but omits path prop if path is passed from routing options and a routing strategy other than path is specified', () => { + const TestingComponent = props => { + const options = useRoutingProps('TestingComponent', props, { path: '/aloha' }); + return
{JSON.stringify(options)}
; + }; + + const { baseElement } = render( + , + ); + expect(baseElement).toMatchSnapshot(); + }); }); diff --git a/packages/react/src/hooks/useRoutingProps.ts b/packages/react/src/hooks/useRoutingProps.ts index e3eac284719..5be76871149 100644 --- a/packages/react/src/hooks/useRoutingProps.ts +++ b/packages/react/src/hooks/useRoutingProps.ts @@ -8,12 +8,20 @@ export function useRoutingProps( props: T, routingOptions?: RoutingOptions, ): T { - const path = routingOptions?.path || props.path; + const path = props.path || routingOptions?.path; if (!path && !props.routing) { errorThrower.throw(noPathProvidedError(componentName)); } - if (props.path) { + if (props.routing && props.routing !== 'path' && routingOptions?.path && !props.path) { + return { + ...routingOptions, + ...props, + path: undefined, + }; + } + + if (path && !props.routing) { return { ...routingOptions, ...props,