Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

support router.go for same page navigations #4461

Open
4 tasks done
jiaojiaodubai opened this issue Jan 3, 2025 · 2 comments
Open
4 tasks done

support router.go for same page navigations #4461

jiaojiaodubai opened this issue Jan 3, 2025 · 2 comments
Labels
client enhancement New feature or request

Comments

@jiaojiaodubai
Copy link

jiaojiaodubai commented Jan 3, 2025

Describe the bug

I try to make a search box that would navigate to search results page with some search params after clicking "search" button, it works fine in dev mode, but can't work on search results page in build mode.

Reproduction

A online demo is available here.

  1. Run npm run docs:dev in terminal.
  2. Try using the search box in the navigation bar to enter letters for searching on the homepage, search results page, and Test Page.
  3. Do the same things in 2. after runing npm run docs:build and npm run docs:preview.

Expected behavior

Build mode should have the same performance as dev mode. On search results page, page should refresh and apply new query params to filter results.

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    vitepress: latest => 1.5.0

Additional context

There is a related report here #813, but I don't think the problem I encountered is related to switching layouts, because my problem is shown on the same page in different modes.

Validations

@jiaojiaodubai jiaojiaodubai added the bug: pending triage Maybe a bug, waiting for confirmation label Jan 3, 2025
@brc-dd
Copy link
Member

brc-dd commented Jan 3, 2025

Ah, the router actually doesn't support same page navigations. You can do something like this in your SearchInput component:

const { pathname: hitPathname } = new URL(
window.location.origin + itemUrl
)
// router doesn't handle same-page navigation so we use the native
// browser location API for anchor navigation
if (route.path === hitPathname) {
window.location.assign(window.location.origin + itemUrl)
} else {
router.go(itemUrl)
}
}

Although it does change the visible URL, useUrlSearchParams cannot track those updates.

@brc-dd brc-dd added enhancement New feature or request client and removed bug: pending triage Maybe a bug, waiting for confirmation labels Jan 3, 2025
@brc-dd brc-dd changed the title router.go can't navigate to same path with different search params in build mode support router.go for same page navigations Jan 3, 2025
@jiaojiaodubai
Copy link
Author

Thank you for your prompt response. I will try to adopt your suggestions to temporarily solve my problem and continue to monitor this issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
client enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants