Fix internal URL not in sync

.vscode/launch.json

@@ -9,7 +9,8 @@
       "args": [
         "--config=jest.config.js",
         "--runInBand",
-        "--no-cache"
+        "--no-cache",
+        "--testNamePattern=."
       ]
     }
   ]

src/minimalReactRouter.test.js

@@ -4,10 +4,22 @@ import ReactDOM from "react-dom";
 import { createRouter } from "./minimalReactRouter";
 import { cleanup, render, waitForElement, wait } from "react-testing-library";
 
+function makeLazy(Component) {
+  return React.lazy(
+    () => new Promise(r => setTimeout(r, 100, { default: Component }))
+  );
+}
+
 afterEach(cleanup);
 
 test("can create router", () => {
-  expect(createRouter(window.history, "/")).toBeTruthy();
+  expect(createRouter(window.history, "/")).toMatchInlineSnapshot(`
+    Object {
+      "push": [Function],
+      "replace": [Function],
+      "useRoutes": [Function],
+    }
+  `);
 });
 
 test("can return result from matching route", async () => {
@@ -20,15 +32,8 @@ test("can return result from matching route", async () => {
     const [component = null] = router.useRoutes(routes);
     return component;
   }
-  const { asFragment, getByText } = render(<App />);
+  const { getByText } = render(<App />);
   await waitForElement(() => getByText("1"));
-  expect(asFragment()).toMatchInlineSnapshot(`
-        <DocumentFragment>
-          <div>
-            1
-          </div>
-        </DocumentFragment>
-    `);
 });
 
 test("can return result from multiple routes", async () => {
@@ -43,15 +48,37 @@ test("can return result from multiple routes", async () => {
     const [Component = () => null] = router.useRoutes(appRoutes);
     return <Component />;
   }
-  const { asFragment, getByText } = render(<App />);
+  const { getByText } = render(<App />);
+  await waitForElement(() => getByText("foo"));
+});
+
+test("returns correct result from routes with wildcard", async () => {
+  const router = createRouter(window.history, "/foo");
+  const routes = {
+    "/foo": () => <div>foo</div>,
+    "/*": () => <div>wildcard</div>
+  };
+  function App() {
+    const [component = null] = router.useRoutes(routes);
+    return component;
+  }
+  const { getByText } = render(<App />);
+  await waitForElement(() => getByText("foo"));
+});
+
+test("can navigate to new route", async () => {
+  const router = createRouter(window.history, "/");
+  const routes = {
+    "/foo": () => <div>foo</div>,
+    "/*": () => <div>wildcard</div>
+  };
+  function App() {
+    const [component = null] = router.useRoutes(routes);
+    return component;
+  }
+  const { getByText } = render(<App />);
+  router.push("/foo");
   await waitForElement(() => getByText("foo"));
-  expect(asFragment()).toMatchInlineSnapshot(`
-    <DocumentFragment>
-      <div>
-        foo
-      </div>
-    </DocumentFragment>
-  `);
 });
 
 test("does not call setState on unmounted route", async () => {
@@ -73,3 +100,95 @@ test("does not call setState on unmounted route", async () => {
     console.error.mockRestore();
   });
 });
+
+test("can lazy-load routes", async () => {
+  const LazyFoo = makeLazy(() => <div>foo</div>);
+  const Default = () => <div>default</div>;
+  const Wildcard = () => <div>wildcard</div>;
+  const router = createRouter(window.history, "/", Default);
+  const routes = {
+    "/foo": () => LazyFoo,
+    "/*": () => Wildcard
+  };
+  function App() {
+    const [Component] = router.useRoutes(routes);
+    React.useEffect(() => {
+      setTimeout(() => router.push("/foo"), 100);
+    }, []);
+    return (
+      <React.Suspense fallback={<div>loading</div>}>
+        <Component />
+      </React.Suspense>
+    );
+  }
+  const { getByText } = render(<App />);
+  await waitForElement(() => getByText("default"));
+  await waitForElement(() => getByText("wildcard"));
+  await waitForElement(() => getByText("loading"));
+  await waitForElement(() => getByText("foo"));
+});
+
+test("can lazy-load lazy-loaded routes", async () => {
+  const router = createRouter(window.history, "/foo/bar", () => (
+    <div>default</div>
+  ));
+  const LazyFooBar = makeLazy(() => <div>foobar</div>);
+  const RouteLoader = React.memo(function RouteLoader({ routes }) {
+    const [Component] = router.useRoutes(routes);
+    return (
+      <React.Suspense fallback={<div>loading</div>}>
+        <Component />
+      </React.Suspense>
+    );
+  });
+  const fooRoutes = {
+    "/foo/bar": () => LazyFooBar
+  };
+  const appRoutes = {
+    "/foo/*": () => makeLazy(() => <RouteLoader routes={fooRoutes} />)
+  };
+  function App() {
+    return <RouteLoader routes={appRoutes} />;
+  }
+  const { getByText } = render(<App />);
+  await waitForElement(() => getByText("default"));
+  await waitForElement(() => getByText("loading"));
+  await waitForElement(() => getByText("foobar"));
+});
+
+test("can redirect to new route", async () => {
+  const router = createRouter(window.history, "/bar");
+  const routes = {
+    "/foo": () => <div>foo</div>,
+    "/bar": ({ redirect }) => redirect("/foo")
+  };
+  function App() {
+    const [component = null] = router.useRoutes(routes);
+    return component;
+  }
+  const { getByText } = render(<App />);
+  await waitForElement(() => getByText("foo"));
+});
+
+test("has path and parameters", async () => {
+  const router = createRouter(window.history, "/a/b/c?q#h", null);
+  const routes = {
+    "/a/:bar/:baz": ({ path, parameters }) => {
+      return ({ path: path2, parameters: parameters2 }) => {
+        const stringValues = [
+          path.toString(),
+          path2.toString(),
+          ...parameters,
+          ...parameters2
+        ];
+        return <div>{stringValues.join()}</div>;
+      };
+    }
+  };
+  function App() {
+    const [Component, props] = router.useRoutes(routes);
+    return Component && <Component {...props} />;
+  }
+  const { getByText } = render(<App />);
+  await waitForElement(() => getByText("/a/b/c?q=#h,/a/b/c?q=#h,b,c,b,c"));
+});

src/minimalReactRouter.ts

@@ -27,6 +27,7 @@ const [setRoute] = resolveLatest(async function setRoute(
 ): Promise<void> {
   // Only set the route if it has changed.
   if (!new PathURL(url).matches(internalState.url)) {
+    internalState.url = url;
     historyFn(null, "", url);
   }
   const { routeResolvers } = internalState;
@@ -36,10 +37,8 @@ const [setRoute] = resolveLatest(async function setRoute(
     const resolveRoute = routeResolvers[(resolverKey as unknown) as string];
     if (resolveRoute) {
       const status = await resolveRoute(url);
-      if (status === undefined) {
-        return;
-      }
-      anyMatch = anyMatch || status;
+      if (status === undefined) return;
+      if (status === true) anyMatch = true;
     }
   }
   if (!anyMatch) {

src/utils/resolveRouteAction.ts

@@ -55,7 +55,6 @@ export async function resolveRouteAction(
   if (!isSameState) {
     setState({ parameters, path: pathURL, result });
   }
-  internalState.url = url;
   redirectStack.length = 0;
   return true;
 }