Stacked navigation

[madsbuch]

How should I handle native stacked navigation when saving state in the URL?

I have two screens: announcement/[announcementId] and comment/[commentId]. I fetch the announcement doing something akin to the following:

const { announcementId } = useSearchParams();
const [announcement] = useAtom(getAnnouncementAtom(`${announcementId}`)[0]);

When I click a comment on the announcement screen it fails due to the fact that announcementId is set to undefined.

I would expect stacked screens to keep their navigation state, however, it seems not to be the case.

What is the canonical way to solve this?