Make shouldRevalidate work

editor/src/components/canvas/remix/remix-rendering.spec.browser2.tsx

@@ -1036,6 +1036,81 @@ describe('Remix navigation', () => {
     })
   })
 
+  it('Can navigate through dynamic link', async () => {
+    const project = createModifiedProject({
+      [StoryboardFilePath]: `import * as React from 'react'
+      import { RemixScene, Storyboard } from 'utopia-api'
+
+      export var storyboard = (
+        <Storyboard data-uid='storyboard-dynamic-links'>
+          <RemixScene
+            style={{
+              width: 700,
+              height: 759,
+              position: 'absolute',
+              left: 212,
+              top: 128,
+            }}
+            data-label='Playground'
+            data-uid='remix-scene'
+          />
+        </Storyboard>
+      )
+      `,
+      ['/src/root.js']: `import React from 'react'
+      import { Outlet } from '@remix-run/react'
+
+      export default function Root() {
+        return (
+          <div data-uid='rootdiv'>
+            ${RootTextContent}
+            <Outlet data-uid='outlet'/>
+          </div>
+        )
+      }
+      `,
+      ['/src/routes/_index.js']: `import React from 'react'
+      import { Link } from '@remix-run/react'
+
+      export default function Index() {
+        return (
+          <Link
+            to='/1'
+            data-testid='remix-link'
+            data-uid='remix-link'
+          >
+            Go
+          </Link>
+        )
+      }      
+      `,
+      ['/src/routes/$postId.js']: `import React from 'react'
+      import { Link, useParams } from '@remix-run/react'
+
+      export default function PostForId() {
+        const { postId } = useParams()
+        const postIdParsed = parseInt(postId)
+        return (
+          <div>
+            <h1>post id: {postId}</h1>
+            <Link to={${'`/${postIdParsed + 1}`'}} data-testid='remix-link'>Next</Link>
+          </div>
+        )
+      }
+
+      `,
+    })
+
+    const renderResult = await renderRemixProject(project)
+    await switchToLiveMode(renderResult)
+    expect(renderResult.renderedDOM.queryAllByText('Go')).toHaveLength(1)
+
+    for (let i = 1; i < 7; i++) {
+      await clickRemixLink(renderResult)
+      expect(renderResult.renderedDOM.queryAllByText(`post id: ${i}`)).toHaveLength(1)
+    }
+  })
+
   describe('remix scene label', () => {
     it('can navigate with the scene label nav buttons, in live mode', async () => {
       const renderResult = await renderRemixProject(projectWithMultipleRoutes('sb1'))

editor/src/components/canvas/remix/utopia-remix-root-component.tsx

@@ -1,5 +1,5 @@
 import { RemixContext } from '@remix-run/react/dist/components'
-import type { RouteModules } from '@remix-run/react/dist/routeModules'
+import type { RouteModules, RouteModule } from '@remix-run/react/dist/routeModules'
 import React from 'react'
 import type { DataRouteObject, Location } from 'react-router'
 import { createMemoryRouter, RouterProvider } from 'react-router'
@@ -15,6 +15,7 @@ import { UiJsxCanvasCtxAtom } from '../ui-jsx-canvas'
 import type { UiJsxCanvasContextData } from '../ui-jsx-canvas'
 import { forceNotNull } from '../../../core/shared/optional-utils'
 import { AlwaysFalse, usePubSubAtomReadOnly } from '../../../core/shared/atom-with-pub-sub'
+import { CreateRemixDerivedDataRefsGLOBAL } from '../../editor/store/remix-derived-data'
 
 type RouterType = ReturnType<typeof createMemoryRouter>
 
@@ -53,7 +54,7 @@ function useGetRouteModules(basePath: ElementPath) {
         (rmc) => getDefaultExportNameAndUidFromFile(projectContentsRef.current, rmc.filePath)?.name,
       )
     },
-    '',
+    'useGetRouteModules defaultExports',
   )
 
   return React.useMemo(() => {
@@ -91,11 +92,14 @@ function useGetRouteModules(basePath: ElementPath) {
         ? (componentProps: any) => createExecutionScope()['ErrorBoundary']?.(componentProps) ?? null
         : undefined
 
-      routeModulesResult[routeId] = {
+      const routeModule: RouteModule = {
         ...value,
         ErrorBoundary: errorBoundary == undefined ? undefined : PathPropHOC(errorBoundary),
         default: PathPropHOC(defaultComponent),
       }
+
+      routeModulesResult[routeId] = routeModule
+      CreateRemixDerivedDataRefsGLOBAL.routeModulesCache.current[routeId] = routeModule
     }
 
     return routeModulesResult

editor/src/components/editor/store/remix-derived-data.tsx

@@ -36,7 +36,7 @@ export interface RemixDerivedData {
   routingTable: RemixRoutingTable
 }
 
-const CreateRemixDerivedDataRefs: {
+export const CreateRemixDerivedDataRefsGLOBAL: {
   mutableContext: { current: MutableUtopiaCtxRefData }
   topLevelComponentRendererComponents: { current: MapLike<MapLike<ComponentRendererComponent>> }
   routeModulesCache: { current: RouteModules }
@@ -66,7 +66,7 @@ export function createRemixDerivedData(
     curriedRequireFn,
     curriedResolveFn,
     projectContents,
-    CreateRemixDerivedDataRefs.routeModulesCache.current,
+    CreateRemixDerivedDataRefsGLOBAL.routeModulesCache.current,
   )
 
   if (routesAndModulesFromManifestResult == null) {