Fix: Improve route matching fallback and optimize imports in components.tsx

[dennev]

PR Checklist

• Addresses existing open issues: Router fails to work properly on navigation #451 , createMemo sometimes returns undefined when called during a transition solid#2352

Summary

This fixes related issues.
It prevents routeMatch from referencing invalid objects in nested routes on multiple paths.
Before the 8b766a9 commit, there was no issue, but after applying that commit, the example in the issue has an error.

How did you test this change?

For example, on the following page, which is an extension of the issue source, the log collected when the button is triggered to navigate from / to /unauthenticated is as follows.

// test/src/App.tsx
// ...
export function App() {
  return (
    <Router root={Layout} rootLoad={() => getCurrentUserState()}>
      {/* Logging out from this route seems to be the root cause. */}
      <Route
      // component={Home}
      >
        <Route
          component={Home}
        >
          <Route path="/1" component={Home2} />
          <Route>
            <Route path="/7" component={Home2} />
            <Route path="/"
              // component={Home}
            />
          </Route>
          <Route path="/6" component={Home3} />
        </Route>
        <Route path="/2" component={Home2} />
        <Route path="/3" component={Home3} />
        <Route path="/4" component={Home4} />
        <Route path="/5" component={Home5} />
      </Route>

      {/* Logging out from this route works fine */}
      <Route path="/working-route" >
        <Route component={Home} path="" >
        </Route>
      </Route>
      <Route path={logoutLandingPath} component={LogoutLanding} />
      <Route path={"1" + logoutLandingPath} component={LogoutLanding} />
      <Route path={"2" + logoutLandingPath} component={LogoutLanding} />
      <Route path={"3" + logoutLandingPath} component={LogoutLanding} />
      <Route path={"4" + logoutLandingPath} component={LogoutLanding} />
    </Router>
  );
}
// ...

// packages/solid-router/src/routers/components.tsx
// ...
const routeStates = createMemo(
    on(props.routerState.matches, (nextMatches, prevMatches, prev: RouteContext[] | undefined) => {
      let equal = prevMatches && nextMatches.length === prevMatches.length;
      const next: RouteContext[] = [];
      for (let i = 0, len = nextMatches.length; i < len; i++) {
        console.log('i',i)   // logger
        console.log('len',len)   // logger
        const prevMatch = prevMatches && prevMatches[i];
        const nextMatch = nextMatches[i];

        if (prev && prevMatch && nextMatch.route.key === prevMatch.route.key) {
          next[i] = prev[i];
        } else {
          equal = false;
          if (disposers[i]) {
            disposers[i]();
          }

          createRoot(dispose => {
            disposers[i] = dispose;
            next[i] = createRouteContext(
              props.routerState,
              next[i - 1] || props.routerState.base,
              createOutlet(() => routeStates()[i + 1]),
              () => {
                let routeMatches = props.routerState.matches();
                console.log("cached i", i);   // logger
                console.log("cached len", len);
                console.log("props.routerState.base", props.routerState.base);
                console.log("routeMatches.length", routeMatches.length);
                console.log("routeMatches[i]", routeMatches[i]);
                return routeMatches[i] ?? routeMatches[0];
              }
            );
          });
        }
      }

      disposers.splice(nextMatches.length).forEach(dispose => dispose());

      if (prev && equal) {
        return prev;
      }
      root = next[0];
      return next;
    })
  );
// ...

If there is no nested structure here, routeMatches[i] will find a matched object with the correct component, but as you enter deeper into the nested structure, routeMatches.length decreases, the routeContext that captured the i in the upper for loop attempts to reference the undefined routeMatches[i], thus causing an error.

Regarding the method for finding the correct routeMatches, we may consider optimizing the cached RouteContext, props.routerState.matches(), or other related components.
The current commit aims to normalize the behavior with minimal modifications.

[changeset-bot]

🦋 Changeset detected

Latest commit: 1aa664e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@solidjs/router	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR