From 2b0876684d241d43a5273c5301184a30ed535d1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dami=C3=A1n=20Pumar?= Date: Fri, 22 Nov 2024 15:14:00 +0100 Subject: [PATCH] fix: solve prevUrl on first render issue (#7082) --- .changeset/dry-jobs-repair.md | 5 +++++ packages/docs/src/routes/docs/(qwikcity)/api/index.mdx | 3 +++ packages/qwik-city/src/runtime/src/qwik-city-component.tsx | 5 ++++- 3 files changed, 12 insertions(+), 1 deletion(-) create mode 100644 .changeset/dry-jobs-repair.md diff --git a/.changeset/dry-jobs-repair.md b/.changeset/dry-jobs-repair.md new file mode 100644 index 00000000000..006e3c1ae67 --- /dev/null +++ b/.changeset/dry-jobs-repair.md @@ -0,0 +1,5 @@ +--- +'@builder.io/qwik-city': patch +--- + +FIX: the previous URL now is undefined on first render. diff --git a/packages/docs/src/routes/docs/(qwikcity)/api/index.mdx b/packages/docs/src/routes/docs/(qwikcity)/api/index.mdx index d5b00e5c86e..9df224ecbe1 100644 --- a/packages/docs/src/routes/docs/(qwikcity)/api/index.mdx +++ b/packages/docs/src/routes/docs/(qwikcity)/api/index.mdx @@ -245,6 +245,9 @@ export const BackButton = component$(() => { The fallback in the nav function ensures that if the previous URL (loc.prevUrl) is not available, the user is redirected to a default path (eg. the root path /). This is useful in scenarios where the navigation history might not include a previous URL, such as when the user directly lands on a specific page without navigating from another page within the app. +> Notice that the **loc.prevUrl** is only available when the user navigates to a page using the [`useNavigate()`](#usenavigate) or [``](/docs/cookbook/nav-link). It is not available when the user navigates to a page using [`the anchor element`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a). + + ## `routeLoader$()` The `routeLoader$()` function is used to declare a new Server Loader in the given page/middleware or layout. Qwik City will execute all the declared loaders for the given route match. Qwik Components can later reference the loaders by importing them and calling the returned custom hook function in order to retrieve the data. diff --git a/packages/qwik-city/src/runtime/src/qwik-city-component.tsx b/packages/qwik-city/src/runtime/src/qwik-city-component.tsx index 692e55869fa..c14cd0f737f 100644 --- a/packages/qwik-city/src/runtime/src/qwik-city-component.tsx +++ b/packages/qwik-city/src/runtime/src/qwik-city-component.tsx @@ -375,7 +375,10 @@ export const QwikCityProvider = component$((props) => { } // Update route location - routeLocation.prevUrl = prevUrl; + if (!isSamePath(trackUrl, prevUrl)) { + routeLocation.prevUrl = prevUrl; + } + routeLocation.url = trackUrl; routeLocation.params = { ...params };