fix(clerk-js): Add usePathnameWithoutSplatRouteParams to handle splat…

… routes

packages/remix/src/client/uiComponents.tsx

@@ -13,23 +13,24 @@ import type {
   SignUpProps,
   UserProfileProps,
 } from '@clerk/types';
-import { useLocation } from '@remix-run/react';
 import React from 'react';
 
+import { usePathnameWithoutSplatRouteParams } from './usePathnameWithoutSplatRouteParams';
+
 // The assignment of UserProfile with BaseUserProfile props is used
 // to support the CustomPage functionality (eg UserProfile.Page)
 // Also the `typeof BaseUserProfile` is used to resolved the following error:
 // "The inferred type of 'UserProfile' cannot be named without a reference to ..."
 export const UserProfile: typeof BaseUserProfile = Object.assign(
   (props: UserProfileProps) => {
-    const { pathname: path } = useLocation();
+    const path = usePathnameWithoutSplatRouteParams();
     return <BaseUserProfile {...useRoutingProps('UserProfile', props, { path })} />;
   },
   { ...BaseUserProfile },
 );
 
 export const CreateOrganization = (props: CreateOrganizationProps) => {
-  const { pathname: path } = useLocation();
+  const path = usePathnameWithoutSplatRouteParams();
   return <BaseCreateOrganization {...useRoutingProps('CreateOrganization', props, { path })} />;
 };
 
@@ -39,18 +40,18 @@ export const CreateOrganization = (props: CreateOrganizationProps) => {
 // "The inferred type of 'OrganizationProfile' cannot be named without a reference to ..."
 export const OrganizationProfile: typeof BaseOrganizationProfile = Object.assign(
   (props: OrganizationProfileProps) => {
-    const { pathname: path } = useLocation();
+    const path = usePathnameWithoutSplatRouteParams();
     return <BaseOrganizationProfile {...useRoutingProps('OrganizationProfile', props, { path })} />;
   },
   { ...BaseOrganizationProfile },
 );
 
 export const SignIn = (props: SignInProps) => {
-  const { pathname: path } = useLocation();
+  const path = usePathnameWithoutSplatRouteParams();
   return <BaseSignIn {...useRoutingProps('SignIn', props, { path })} />;
 };
 
 export const SignUp = (props: SignUpProps) => {
-  const { pathname: path } = useLocation();
+  const path = usePathnameWithoutSplatRouteParams();
   return <BaseSignUp {...useRoutingProps('SignUp', props, { path })} />;
 };

packages/remix/src/client/usePathnameWithoutSplatRouteParams.tsx

@@ -0,0 +1,18 @@
+import { useLocation, useParams } from '@remix-run/react';
+
+export const usePathnameWithoutSplatRouteParams = () => {
+  const params = useParams();
+  const { pathname } = useLocation();
+
+  // Get the splat route params
+  // Remix store splat route params in an object with a key of '*'
+  // If there are no splat route params, we fallback to an empty string
+  const splatRouteParam = params['*'] || '';
+
+  // Remove the splat route param from the pathname
+  // so we end up with the pathname where the components are mounted at
+  // eg /user/123/profile/security will return /user/123/profile as the path
+  const path = pathname.replace(splatRouteParam, '').replace(/\/$/, '').replace(/^\//, '').trim();
+
+  return `/${path}`;
+};