fix(router): decode route params before path regeneration

hazre · hazre · commit bfd792e8fa5a · 2026-02-15T00:01:02.000+01:00
diff --git a/src/app/components/BackRouteHandler.tsx b/src/app/components/BackRouteHandler.tsx
@@ -8,6 +8,7 @@ import {
   getSpacePath,
 } from '../pages/pathUtils';
 import { DIRECT_PATH, EXPLORE_PATH, HOME_PATH, INBOX_PATH, SPACE_PATH } from '../pages/paths';
+import { tryDecodeURIComponent } from '../utils/dom';
 
 type BackRouteHandlerProps = {
   children: (onBack: () => void) => ReactNode;
@@ -52,7 +53,7 @@ export function BackRouteHandler({ children }: BackRouteHandlerProps) {
       location.pathname
     );
     if (spaceMatch?.params.spaceIdOrAlias) {
-      navigate(getSpacePath(spaceMatch.params.spaceIdOrAlias));
+      navigate(getSpacePath(tryDecodeURIComponent(spaceMatch.params.spaceIdOrAlias)));
       return;
     }
     if (
diff --git a/src/app/hooks/router/useSelectedRoom.ts b/src/app/hooks/router/useSelectedRoom.ts
@@ -1,11 +1,15 @@
 import { useParams } from 'react-router-dom';
 import { getCanonicalAliasRoomId, isRoomAlias } from '$appUtils/matrix';
+import { tryDecodeURIComponent } from '$appUtils/dom';
 import { useMatrixClient } from '../useMatrixClient';
 
 export const useSelectedRoom = (): string | undefined => {
   const mx = useMatrixClient();
 
-  const { roomIdOrAlias } = useParams();
+  const { roomIdOrAlias: encodedRoomIdOrAlias } = useParams();
+  const roomIdOrAlias = encodedRoomIdOrAlias
+    ? tryDecodeURIComponent(encodedRoomIdOrAlias)
+    : undefined;
   const roomId =
     roomIdOrAlias && isRoomAlias(roomIdOrAlias)
       ? getCanonicalAliasRoomId(mx, roomIdOrAlias)
diff --git a/src/app/hooks/router/useSelectedSpace.ts b/src/app/hooks/router/useSelectedSpace.ts
@@ -1,12 +1,16 @@
 import { useMatch, useParams } from 'react-router-dom';
 import { getCanonicalAliasRoomId, isRoomAlias } from '$appUtils/matrix';
+import { tryDecodeURIComponent } from '$appUtils/dom';
 import { useMatrixClient } from '../useMatrixClient';
 import { getSpaceLobbyPath, getSpaceSearchPath } from '$pages/pathUtils';
 
 export const useSelectedSpace = (): string | undefined => {
   const mx = useMatrixClient();
 
-  const { spaceIdOrAlias } = useParams();
+  const { spaceIdOrAlias: encodedSpaceIdOrAlias } = useParams();
+  const spaceIdOrAlias = encodedSpaceIdOrAlias
+    ? tryDecodeURIComponent(encodedSpaceIdOrAlias)
+    : undefined;
 
   const spaceId =
     spaceIdOrAlias && isRoomAlias(spaceIdOrAlias)
diff --git a/src/app/pages/Router.tsx b/src/app/pages/Router.tsx
@@ -68,6 +68,7 @@ import { Create } from './client/create';
 import { CreateSpaceModalRenderer } from '../features/create-space';
 import { SearchModalRenderer } from '../features/search';
 import { getFallbackSession } from '../state/sessions';
+import { tryDecodeURIComponent } from '../utils/dom';
 import { pushSessionToSW } from '../../sw-session';
 
 export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize) => {
@@ -225,7 +226,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
               loader={({ params }) => {
                 const { spaceIdOrAlias } = params;
                 if (spaceIdOrAlias) {
-                  return redirect(getSpaceLobbyPath(spaceIdOrAlias));
+                  return redirect(getSpaceLobbyPath(tryDecodeURIComponent(spaceIdOrAlias)));
                 }
                 return null;
               }}
diff --git a/src/app/pages/client/direct/RoomProvider.tsx b/src/app/pages/client/direct/RoomProvider.tsx
@@ -5,12 +5,17 @@ import { IsDirectRoomProvider, RoomProvider } from '$hooks/useRoom';
 import { useMatrixClient } from '$hooks/useMatrixClient';
 import { JoinBeforeNavigate } from '$features/join-before-navigate';
 import { useDirectRooms } from './useDirectRooms';
+import { tryDecodeURIComponent } from '$appUtils/dom';
 
 export function DirectRouteRoomProvider({ children }: { children: ReactNode }) {
   const mx = useMatrixClient();
   const rooms = useDirectRooms();
 
-  const { roomIdOrAlias, eventId } = useParams();
+  const { roomIdOrAlias: encodedRoomIdOrAlias, eventId: encodedEventId } = useParams();
+  const roomIdOrAlias = encodedRoomIdOrAlias
+    ? tryDecodeURIComponent(encodedRoomIdOrAlias)
+    : undefined;
+  const eventId = encodedEventId ? tryDecodeURIComponent(encodedEventId) : undefined;
   const roomId = useSelectedRoom();
   const room = mx.getRoom(roomId);
 
diff --git a/src/app/pages/client/home/RoomProvider.tsx b/src/app/pages/client/home/RoomProvider.tsx
@@ -6,12 +6,17 @@ import { useMatrixClient } from '$hooks/useMatrixClient';
 import { JoinBeforeNavigate } from '$features/join-before-navigate';
 import { useHomeRooms } from './useHomeRooms';
 import { useSearchParamsViaServers } from '$hooks/router/useSearchParamsViaServers';
+import { tryDecodeURIComponent } from '$appUtils/dom';
 
 export function HomeRouteRoomProvider({ children }: { children: ReactNode }) {
   const mx = useMatrixClient();
   const rooms = useHomeRooms();
 
-  const { roomIdOrAlias, eventId } = useParams();
+  const { roomIdOrAlias: encodedRoomIdOrAlias, eventId: encodedEventId } = useParams();
+  const roomIdOrAlias = encodedRoomIdOrAlias
+    ? tryDecodeURIComponent(encodedRoomIdOrAlias)
+    : undefined;
+  const eventId = encodedEventId ? tryDecodeURIComponent(encodedEventId) : undefined;
   const viaServers = useSearchParamsViaServers();
   const roomId = useSelectedRoom();
   const room = mx.getRoom(roomId);
diff --git a/src/app/pages/client/space/RoomProvider.tsx b/src/app/pages/client/space/RoomProvider.tsx
@@ -7,6 +7,7 @@ import { useMatrixClient } from '$hooks/useMatrixClient';
 import { JoinBeforeNavigate } from '$features/join-before-navigate';
 import { useSpace } from '$hooks/useSpace';
 import { getAllParents, getSpaceChildren } from '$appUtils/room';
+import { tryDecodeURIComponent } from '$appUtils/dom';
 import { roomToParentsAtom } from '$state/room/roomToParents';
 import { allRoomsAtom } from '$state/room-list/roomList';
 import { useSearchParamsViaServers } from '$hooks/router/useSearchParamsViaServers';
@@ -22,7 +23,11 @@ export function SpaceRouteRoomProvider({ children }: { children: ReactNode }) {
   const mDirects = useAtomValue(mDirectAtom);
   const allRooms = useAtomValue(allRoomsAtom);
 
-  const { roomIdOrAlias, eventId } = useParams();
+  const { roomIdOrAlias: encodedRoomIdOrAlias, eventId: encodedEventId } = useParams();
+  const roomIdOrAlias = encodedRoomIdOrAlias
+    ? tryDecodeURIComponent(encodedRoomIdOrAlias)
+    : undefined;
+  const eventId = encodedEventId ? tryDecodeURIComponent(encodedEventId) : undefined;
   const viaServers = useSearchParamsViaServers();
   const roomId = useSelectedRoom();
   const room = mx.getRoom(roomId);
diff --git a/src/app/pages/client/space/SpaceProvider.tsx b/src/app/pages/client/space/SpaceProvider.tsx
@@ -7,6 +7,7 @@ import { useSelectedSpace } from '$hooks/router/useSelectedSpace';
 import { SpaceProvider } from '$hooks/useSpace';
 import { JoinBeforeNavigate } from '$features/join-before-navigate';
 import { useSearchParamsViaServers } from '$hooks/router/useSearchParamsViaServers';
+import { tryDecodeURIComponent } from '$appUtils/dom';
 
 type RouteSpaceProviderProps = {
   children: ReactNode;
@@ -15,7 +16,10 @@ export function RouteSpaceProvider({ children }: RouteSpaceProviderProps) {
   const mx = useMatrixClient();
   const joinedSpaces = useSpaces(mx, allRoomsAtom);
 
-  const { spaceIdOrAlias } = useParams();
+  const { spaceIdOrAlias: encodedSpaceIdOrAlias } = useParams();
+  const spaceIdOrAlias = encodedSpaceIdOrAlias
+    ? tryDecodeURIComponent(encodedSpaceIdOrAlias)
+    : undefined;
   const viaServers = useSearchParamsViaServers();
 
   const selectedSpaceId = useSelectedSpace();
