4Catalyzer / found

Extensible route-based routing for React applications

Home Page:https://4catalyzer.github.io/found/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Routes change in browser location, but content does not change (even though found render fires)

rosskevin opened this issue · comments

We have just upgraded an application that has been running successfully for years with found.

It is now using react: 18.2.0, found: 1.3.0 and we did switch our build to vite. I have tried this with and without strict mode based on @jquense comment in #968, but there is no change. I reviewed #961 but the only similarity there is we are both using vite. I reviewed the changelog but did not spot anything I am missing.

Symptoms:

  • any page you go to directly and hit return in the location bar renders fine
  • click any link and I have verified in the debugger it sends the correct information to found to change
  • url in the browser location changes
  • I see the found renderFn and graphql queries fire; but
  • it stays on the same page

Attempts include strict mode on/off, add/remove hotRouteConfig, remove found-scroll (seems to be falling behind), but no changes. Each page works, it will just not render after click of a link (only browser location bar change).

I've boiled down my router config to:

import {
  BrowserRouterOptions,
  createBrowserRouter,
  createRender,
  makeRouteConfig,
  RenderArgs,
} from 'found'
import * as React from 'react'

export function createRouter(routes: React.ReactNode, options?: BrowserRouterOptions) {
  const renderFn = createRender({})

  const defaultConfig = {
    historyOptions: { useBeforeUnload: true },
    render: (renderArgs: RenderArgs) => renderFn(renderArgs),
    routeConfig: makeRouteConfig(routes),
  }
  const config = { ...defaultConfig, ...(options || {}) }
  return createBrowserRouter(config)
}

I'm still looking but appreciate any pointers.

I'm going to close this for the moment - I just found a top level route that works and it is leading me to believe we are likely to have a problem in our route config.

Just to close this loop, we did some optimization of an <AppContent/> and <AppFrame/> components at the top level with React.memo and a custom comparator. The condition was inverted and therefore caused the content from the Component on the new route pushed to not render because it signaled no need to do so.