Fix router state after client side navigation (#4383)

* Fix router state after client side navigation

* add client side navigation to the fullstack routing spec

* fix playwright test

packages/playwright-tests/fullstack-routing.spec.js

@@ -51,3 +51,33 @@ test("unknown route", async ({ request }) => {
 
   expect(response.status()).toBe(404);
 });
+
+// Clicking the link on the home page should navigate to the blog route
+test("click blog link", async ({ page }) => {
+  await page.goto("http://localhost:8888");
+
+  // Click the link to the blog route
+  await page.locator('a').click();
+
+  // Wait for navigation to complete
+  await page.waitForURL("http://localhost:8888/blog/1/");
+
+  // Check that the blog page is displayed
+  const text = await page.textContent("body");
+  expect(text).toContain("id: 1");
+});
+
+// Clicking the link on the blog page should navigate back to the home route
+test("click home link from blog", async ({ page }) => {
+  await page.goto("http://localhost:8888/blog/1");
+
+  // Click the link to the home route
+  await page.locator('a').click();
+
+  // Wait for navigation to complete
+  await page.waitForURL("http://localhost:8888");
+
+  // Check that the home page is displayed
+  const text = await page.textContent("body");
+  expect(text).toContain("Home");
+});

packages/playwright-tests/fullstack-routing/src/main.rs

@@ -36,6 +36,9 @@ enum Route {
 
 #[component]
 fn Blog(id: i32) -> Element {
+    let route: Route = use_route();
+    assert_eq!(route, Route::Blog { id });
+
     rsx! {
         Link { to: Route::Home {}, "Go home" }
         "id: {id}"
@@ -51,8 +54,12 @@ fn ThrowsError() -> Element {
 
 #[component]
 fn Home() -> Element {
+    let route: Route = use_route();
+    assert_eq!(route, Route::Home);
+
     rsx! {
         "Home"
+        Link { to: Route::Blog { id: 1 }, "Go to blog 1" }
     }
 }