fix: restore rooms and DMs after React Router 7 upgrade

Stop double-encoding Matrix IDs in pathUtils, decode route params on read, fix millify CJS import, and read space children from currentState so channels and joins work again.

src/app/components/BackRouteHandler.tsx

@@ -1,6 +1,7 @@
 import { ReactNode, useCallback } from 'react';
 import { matchPath, useLocation, useNavigate } from 'react-router-dom';
 import {
+  decodeRouteParam,
   getDirectPath,
   getExplorePath,
   getHomePath,
@@ -52,7 +53,10 @@ export function BackRouteHandler({ children }: BackRouteHandlerProps) {
       location.pathname
     );
     if (spaceMatch?.params.spaceIdOrAlias) {
-      navigate(getSpacePath(spaceMatch.params.spaceIdOrAlias));
+      const spaceIdOrAlias = decodeRouteParam(spaceMatch.params.spaceIdOrAlias);
+      if (spaceIdOrAlias) {
+        navigate(getSpacePath(spaceIdOrAlias));
+      }
       return;
     }
     if (

src/app/features/room/Room.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect } from 'react';
 import { Box, Line } from 'folds';
+import { decodeRouteParam } from '../../pages/pathUtils';
 import { useParams } from 'react-router-dom';
 import { isKeyHotkey } from 'is-hotkey';
 import { useSetAtom } from 'jotai';
@@ -19,7 +20,8 @@ import { isForum } from '../../utils/room';
 import { ForumRoomView } from './ForumRoomView';
 
 export function Room() {
-  const { eventId } = useParams();
+  const { eventId: rawEventId } = useParams();
+  const eventId = decodeRouteParam(rawEventId);
   const room = useRoom();
   const mx = useMatrixClient();
   const setActiveRoomId = useSetAtom(activeRoomIdAtom);

src/app/hooks/router/useExploreSelected.ts

@@ -1,5 +1,5 @@
 import { useMatch, useParams } from 'react-router-dom';
-import { getExploreFeaturedPath, getExplorePath } from '../../pages/pathUtils';
+import { decodeRouteParam, getExploreFeaturedPath, getExplorePath } from '../../pages/pathUtils';
 
 export const useExploreSelected = (): boolean => {
   const match = useMatch({
@@ -24,5 +24,5 @@ export const useExploreFeaturedSelected = (): boolean => {
 export const useExploreServer = (): string | undefined => {
   const { server } = useParams();
 
-  return server;
+  return decodeRouteParam(server);
 };

src/app/hooks/router/useSelectedRoom.ts

@@ -1,11 +1,13 @@
 import { useParams } from 'react-router-dom';
+import { decodeRouteParam } from '../../pages/pathUtils';
 import { getCanonicalAliasRoomId, isRoomAlias } from '../../utils/matrix';
 import { useMatrixClient } from '../useMatrixClient';
 
 export const useSelectedRoom = (): string | undefined => {
   const mx = useMatrixClient();
 
-  const { roomIdOrAlias } = useParams();
+  const { roomIdOrAlias: rawRoomIdOrAlias } = useParams();
+  const roomIdOrAlias = decodeRouteParam(rawRoomIdOrAlias);
   const roomId =
     roomIdOrAlias && isRoomAlias(roomIdOrAlias)
       ? getCanonicalAliasRoomId(mx, roomIdOrAlias)

src/app/hooks/router/useSelectedSpace.ts

@@ -1,11 +1,13 @@
 import { useLocation, useParams } from 'react-router-dom';
+import { decodeRouteParam } from '../../pages/pathUtils';
 import { getCanonicalAliasRoomId, isRoomAlias } from '../../utils/matrix';
 import { useMatrixClient } from '../useMatrixClient';
 
 export const useSelectedSpace = (): string | undefined => {
   const mx = useMatrixClient();
 
-  const { spaceIdOrAlias } = useParams();
+  const { spaceIdOrAlias: rawSpaceIdOrAlias } = useParams();
+  const spaceIdOrAlias = decodeRouteParam(rawSpaceIdOrAlias);
 
   const spaceId =
     spaceIdOrAlias && isRoomAlias(spaceIdOrAlias)

src/app/hooks/useJoinedRoomId.ts

@@ -1,15 +1,17 @@
 import { useMemo } from 'react';
 import { useMatrixClient } from './useMatrixClient';
 
+import { decodeRouteParam } from '../pages/pathUtils';
 import { getCanonicalAliasRoomId, isRoomAlias } from '../utils/matrix';
 
 export const useJoinedRoomId = (allRooms: string[], roomIdOrAlias: string): string | undefined => {
   const mx = useMatrixClient();
 
   const joinedRoomId = useMemo(() => {
-    const roomId = isRoomAlias(roomIdOrAlias)
+    const decoded = decodeRouteParam(roomIdOrAlias) ?? roomIdOrAlias;
-      ? getCanonicalAliasRoomId(mx, roomIdOrAlias)
+    const roomId = isRoomAlias(decoded)
-      : roomIdOrAlias;
+      ? getCanonicalAliasRoomId(mx, decoded)
+      : decoded;
 
     if (roomId && allRooms.includes(roomId)) return roomId;
     return undefined;

src/app/pages/auth/AuthLayout.tsx

@@ -96,10 +96,11 @@ export function AuthLayout() {
 
   // if server is mismatches with path server, update path
   useEffect(() => {
-    if (!urlEncodedServer || tryDecodeURIComponent(urlEncodedServer) !== server) {
+    const decodedUrlServer = urlEncodedServer ? tryDecodeURIComponent(urlEncodedServer) : undefined;
+    if (!urlEncodedServer || decodedUrlServer !== server) {
       navigate(
         generatePath(currentAuthPath(location.pathname), {
-          server: encodeURIComponent(server),
+          server,
         }) + location.search,
         { replace: true }
       );
@@ -114,7 +115,7 @@ export function AuthLayout() {
         return;
       }
       navigate(
-        generatePath(currentAuthPath(location.pathname), { server: encodeURIComponent(newServer) }) + location.search
+        generatePath(currentAuthPath(location.pathname), { server: newServer }) + location.search
       );
     },
     [navigate, location, discoveryState, server, discoverServer]

src/app/pages/client/direct/RoomProvider.tsx

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import { useParams } from 'react-router-dom';
+import { decodeRouteParam } from '../../pathUtils';
 import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
 import { IsDirectRoomProvider, RoomProvider } from '../../../hooks/useRoom';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
@@ -10,12 +11,19 @@ export function DirectRouteRoomProvider({ children }: { children: ReactNode }) {
   const mx = useMatrixClient();
   const rooms = useDirectRooms();
 
-  const { roomIdOrAlias, eventId } = useParams();
+  const { roomIdOrAlias: rawRoomIdOrAlias, eventId: rawEventId } = useParams();
+  const roomIdOrAlias = decodeRouteParam(rawRoomIdOrAlias);
+  const eventId = decodeRouteParam(rawEventId);
   const roomId = useSelectedRoom();
   const room = mx.getRoom(roomId);
 
   if (!room || !rooms.includes(room.roomId)) {
-    return <JoinBeforeNavigate roomIdOrAlias={roomIdOrAlias!} eventId={eventId} />;
+    return (
+      <JoinBeforeNavigate
+        roomIdOrAlias={roomIdOrAlias ?? rawRoomIdOrAlias!}
+        eventId={eventId}
+      />
+    );
   }
 
   return (

src/app/pages/client/explore/Server.tsx

@@ -20,7 +20,7 @@ import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { RoomTopicViewer } from '../../../components/room-topic-viewer';
 import { RoomCard, RoomCardBase, RoomCardGrid } from '../../../components/room-card';
 import { ExploreServerPathSearchParams } from '../../paths';
-import { getExploreServerPath, withSearchParam } from '../../pathUtils';
+import { getExploreServerPath, decodeRouteParam, withSearchParam } from '../../pathUtils';
 import * as css from './style.css';
 import { allRoomsAtom } from '../../../state/room-list/roomList';
 import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
@@ -324,7 +324,8 @@ function LimitButton({ limit, onLimitChange }: LimitButtonProps) {
 }
 
 export function PublicRooms() {
-  const { server } = useParams();
+  const { server: rawServer } = useParams();
+  const server = decodeRouteParam(rawServer);
   const mx = useMatrixClient();
   const userId = mx.getUserId();
   const userServer = userId && getMxIdServer(userId);

src/app/pages/client/home/RoomProvider.tsx

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import { useParams } from 'react-router-dom';
+import { decodeRouteParam } from '../../pathUtils';
 import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
 import { IsDirectRoomProvider, RoomProvider } from '../../../hooks/useRoom';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
@@ -11,7 +12,9 @@ export function HomeRouteRoomProvider({ children }: { children: ReactNode }) {
   const mx = useMatrixClient();
   const rooms = useHomeRooms();
 
-  const { roomIdOrAlias, eventId } = useParams();
+  const { roomIdOrAlias: rawRoomIdOrAlias, eventId: rawEventId } = useParams();
+  const roomIdOrAlias = decodeRouteParam(rawRoomIdOrAlias);
+  const eventId = decodeRouteParam(rawEventId);
   const viaServers = useSearchParamsViaServers();
   const roomId = useSelectedRoom();
   const room = mx.getRoom(roomId);
@@ -19,7 +22,7 @@ export function HomeRouteRoomProvider({ children }: { children: ReactNode }) {
   if (!room || !rooms.includes(room.roomId)) {
     return (
       <JoinBeforeNavigate
-        roomIdOrAlias={roomIdOrAlias!}
+        roomIdOrAlias={roomIdOrAlias ?? rawRoomIdOrAlias!}
         eventId={eventId}
         viaServers={viaServers}
       />

src/app/pages/client/space/RoomProvider.tsx

@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react';
 import { useParams } from 'react-router-dom';
 import { useAtom, useAtomValue } from 'jotai';
+import { decodeRouteParam } from '../../pathUtils';
 import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
 import { IsDirectRoomProvider, RoomProvider } from '../../../hooks/useRoom';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
@@ -22,7 +23,9 @@ export function SpaceRouteRoomProvider({ children }: { children: ReactNode }) {
   const mDirects = useAtomValue(mDirectAtom);
   const allRooms = useAtomValue(allRoomsAtom);
 
-  const { roomIdOrAlias, eventId } = useParams();
+  const { roomIdOrAlias: rawRoomIdOrAlias, eventId: rawEventId } = useParams();
+  const roomIdOrAlias = decodeRouteParam(rawRoomIdOrAlias);
+  const eventId = decodeRouteParam(rawEventId);
   const viaServers = useSearchParamsViaServers();
   const roomId = useSelectedRoom();
   const room = mx.getRoom(roomId);
@@ -31,7 +34,7 @@ export function SpaceRouteRoomProvider({ children }: { children: ReactNode }) {
     // room is not joined
     return (
       <JoinBeforeNavigate
-        roomIdOrAlias={roomIdOrAlias!}
+        roomIdOrAlias={roomIdOrAlias ?? rawRoomIdOrAlias!}
         eventId={eventId}
         viaServers={viaServers}
       />
@@ -59,7 +62,7 @@ export function SpaceRouteRoomProvider({ children }: { children: ReactNode }) {
 
     return (
       <JoinBeforeNavigate
-        roomIdOrAlias={roomIdOrAlias!}
+        roomIdOrAlias={roomIdOrAlias ?? rawRoomIdOrAlias!}
         eventId={eventId}
         viaServers={viaServers}
       />

src/app/pages/client/space/Space.tsx

@@ -324,7 +324,7 @@ export function Space() {
   const virtualizer = useVirtualizer({
     count: flattenedHierarchy.length,
     getScrollElement: () => scrollRef.current,
-    estimateSize: () => 0,
+    estimateSize: () => 32,
     overscan: 10,
   });
 

src/app/pages/client/space/SpaceProvider.tsx

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import { useParams } from 'react-router-dom';
+import { decodeRouteParam } from '../../pathUtils';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useAutoJoinOnSpaceVisit } from '../../../hooks/useAutoJoinSpaceRooms';
 import { useSpaces } from '../../../state/hooks/roomList';
@@ -16,7 +17,8 @@ export function RouteSpaceProvider({ children }: RouteSpaceProviderProps) {
   const mx = useMatrixClient();
   const joinedSpaces = useSpaces(mx, allRoomsAtom);
 
-  const { spaceIdOrAlias } = useParams();
+  const { spaceIdOrAlias: rawSpaceIdOrAlias } = useParams();
+  const spaceIdOrAlias = decodeRouteParam(rawSpaceIdOrAlias);
   const viaServers = useSearchParamsViaServers();
 
   const selectedSpaceId = useSelectedSpace();
@@ -25,7 +27,12 @@ export function RouteSpaceProvider({ children }: RouteSpaceProviderProps) {
   useAutoJoinOnSpaceVisit(space ?? undefined);
 
   if (!space || !joinedSpaces.includes(space.roomId)) {
-    return <JoinBeforeNavigate roomIdOrAlias={spaceIdOrAlias ?? ''} viaServers={viaServers} />;
+    return (
+      <JoinBeforeNavigate
+        roomIdOrAlias={spaceIdOrAlias ?? rawSpaceIdOrAlias ?? ''}
+        viaServers={viaServers}
+      />
+    );
   }
 
   return (

src/app/pages/pathUtils.ts

@@ -28,6 +28,7 @@ import {
   CREATE_PATH,
 } from './paths';
 import { trimLeadingSlash, trimTrailingSlash } from '../utils/common';
+import { tryDecodeURIComponent } from '../utils/dom';
 import { HashRouterConfig } from '../hooks/useClientConfig';
 import type { MatrixClient } from 'matrix-js-sdk';
 import { getCanonicalAliasOrRoomId } from '../utils/matrix';
@@ -46,6 +47,18 @@ export const withSearchParam = <T extends Record<string, string>>(
 export const encodeSearchParamValueArray = (ids: string[]): string => ids.join(',');
 export const decodeSearchParamValueArray = (idsParam: string): string[] => idsParam.split(',');
 
+/** Decode route params (React Router 7 encodes in generatePath — do not pre-encode). */
+export const decodeRouteParam = (param: string | undefined): string | undefined => {
+  if (!param) return param;
+  let decoded = param;
+  let next = tryDecodeURIComponent(decoded);
+  while (next !== decoded) {
+    decoded = next;
+    next = tryDecodeURIComponent(decoded);
+  }
+  return decoded;
+};
+
 export const getOriginBaseUrl = (hashRouterConfig?: HashRouterConfig): string => {
   const baseUrl = `${trimTrailingSlash(window.location.origin)}${import.meta.env.BASE_URL}`;
 
@@ -79,17 +92,17 @@ export const getAppPathFromHref = (baseUrl: string, href: string): string => {
 export const getRootPath = (): string => ROOT_PATH;
 
 export const getLoginPath = (server?: string): string => {
-  const params = server ? { server: encodeURIComponent(server) } : undefined;
+  const params = server ? { server } : undefined;
   return generatePath(LOGIN_PATH, params);
 };
 
 export const getRegisterPath = (server?: string): string => {
-  const params = server ? { server: encodeURIComponent(server) } : undefined;
+  const params = server ? { server } : undefined;
   return generatePath(REGISTER_PATH, params);
 };
 
 export const getResetPasswordPath = (server?: string): string => {
-  const params = server ? { server: encodeURIComponent(server) } : undefined;
+  const params = server ? { server } : undefined;
   return generatePath(RESET_PASSWORD_PATH, params);
 };
 
@@ -99,8 +112,8 @@ export const getHomeJoinPath = (): string => HOME_JOIN_PATH;
 export const getHomeSearchPath = (): string => HOME_SEARCH_PATH;
 export const getHomeRoomPath = (roomIdOrAlias: string, eventId?: string): string => {
   const params = {
-    roomIdOrAlias: encodeURIComponent(roomIdOrAlias),
+    roomIdOrAlias,
-    eventId: eventId ? encodeURIComponent(eventId) : null,
+    eventId: eventId ?? null,
   };
 
   return generatePath(HOME_ROOM_PATH, params);
@@ -110,8 +123,8 @@ export const getDirectPath = (): string => DIRECT_PATH;
 export const getDirectCreatePath = (): string => DIRECT_CREATE_PATH;
 export const getDirectRoomPath = (roomIdOrAlias: string, eventId?: string): string => {
   const params = {
-    roomIdOrAlias: encodeURIComponent(roomIdOrAlias),
+    roomIdOrAlias,
-    eventId: eventId ? encodeURIComponent(eventId) : null,
+    eventId: eventId ?? null,
   };
 
   return generatePath(DIRECT_ROOM_PATH, params);
@@ -121,20 +134,20 @@ export const getDirectInvitesPath = (): string => DIRECT_INVITES_PATH;
 
 export const getSpacePath = (spaceIdOrAlias: string): string => {
   const params = {
-    spaceIdOrAlias: encodeURIComponent(spaceIdOrAlias),
+    spaceIdOrAlias,
   };
 
   return generatePath(SPACE_PATH, params);
 };
 export const getSpaceLobbyPath = (spaceIdOrAlias: string): string => {
   const params = {
-    spaceIdOrAlias: encodeURIComponent(spaceIdOrAlias),
+    spaceIdOrAlias,
   };
   return generatePath(SPACE_LOBBY_PATH, params);
 };
 export const getSpaceFeedPath = (spaceIdOrAlias: string): string => {
   const params = {
-    spaceIdOrAlias: encodeURIComponent(spaceIdOrAlias),
+    spaceIdOrAlias,
   };
   return generatePath(SPACE_FEED_PATH, params);
 };
@@ -149,7 +162,7 @@ export const getSpaceDefaultPath = (mx: MatrixClient, spaceId: string): string =
 };
 export const getSpaceSearchPath = (spaceIdOrAlias: string): string => {
   const params = {
-    spaceIdOrAlias: encodeURIComponent(spaceIdOrAlias),
+    spaceIdOrAlias,
   };
   return generatePath(SPACE_SEARCH_PATH, params);
 };
@@ -159,9 +172,9 @@ export const getSpaceRoomPath = (
   eventId?: string
 ): string => {
   const params = {
-    spaceIdOrAlias: encodeURIComponent(spaceIdOrAlias),
+    spaceIdOrAlias,
-    roomIdOrAlias: encodeURIComponent(roomIdOrAlias),
+    roomIdOrAlias,
-    eventId: eventId ? encodeURIComponent(eventId) : null,
+    eventId: eventId ?? null,
   };
 
   return generatePath(SPACE_ROOM_PATH, params);
@@ -171,7 +184,7 @@ export const getExplorePath = (): string => EXPLORE_PATH;
 export const getExploreFeaturedPath = (): string => EXPLORE_FEATURED_PATH;
 export const getExploreServerPath = (server: string): string => {
   const params = {
-    server: encodeURIComponent(server),
+    server,
   };
   return generatePath(EXPLORE_SERVER_PATH, params);
 };

src/app/plugins/millify.ts

@@ -1,8 +1,8 @@
-import millifyPlugin from 'millify';
+import { millify as millifyFn } from 'millify';
-import { MillifyOptions } from 'millify/dist/options';
+import type { MillifyOptions } from 'millify/dist/options';
 
 export const millify = (count: number, options?: Partial<MillifyOptions>): string =>
-  millifyPlugin(count, {
+  millifyFn(count, {
     precision: 1,
     locales: [],
     ...options,

src/app/utils/room.ts

@@ -34,12 +34,20 @@ export const getStateEvent = (
   room: Room,
   eventType: StateEvent,
   stateKey = ''
-): MatrixEvent | undefined =>
+): MatrixEvent | undefined => {
-  room.getLiveTimeline().getState(EventTimeline.FORWARDS)?.getStateEvents(eventType, stateKey) ??
+  const fromCurrent = room.currentState?.getStateEvents(eventType, stateKey);
-  undefined;
+  if (fromCurrent) return fromCurrent;
+  return (
+    room.getLiveTimeline().getState(EventTimeline.FORWARDS)?.getStateEvents(eventType, stateKey) ??
+    undefined
+  );
+};
 
-export const getStateEvents = (room: Room, eventType: StateEvent): MatrixEvent[] =>
+export const getStateEvents = (room: Room, eventType: StateEvent): MatrixEvent[] => {
-  room.getLiveTimeline().getState(EventTimeline.FORWARDS)?.getStateEvents(eventType) ?? [];
+  const fromCurrent = room.currentState?.getStateEvents(eventType);
+  if (fromCurrent && fromCurrent.length > 0) return fromCurrent;
+  return room.getLiveTimeline().getState(EventTimeline.FORWARDS)?.getStateEvents(eventType) ?? [];
+};
 
 export const getAccountData = (
   mx: MatrixClient,
@@ -170,10 +178,13 @@ export const isUnsupportedRoom = (room: Room | null): boolean => {
 };
 
 export function isValidChild(mEvent: MatrixEvent): boolean {
-  return (
+  if (mEvent.getType() !== StateEvent.SpaceChild) return false;
-    mEvent.getType() === StateEvent.SpaceChild &&
+  const stateKey = mEvent.getStateKey();
-    Array.isArray(mEvent.getContent<{ via: string[] }>().via)
+  if (!stateKey || !stateKey.startsWith('!')) return false;
-  );
+  const { via } = mEvent.getContent<{ via?: string[] }>();
+  // via is optional on m.space.child; only reject malformed values
+  if (via !== undefined && !Array.isArray(via)) return false;
+  return true;
 }
 
 export const getAllParents = (roomToParents: RoomToParents, roomId: string): Set<string> => {