[JSS 22 Vue] RichText routeHandler drops query string from internal links during SPA navigation

Open Beginner friendly
#2,191 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
72/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Domain
frontend

Research direction

Start at the Vue 3 JSS RichText component's routeHandler method and inspect how it builds the SPA navigation destination from the internal link target. Reproduce the Sitecore Rich Text link with query parameters, then verify that navigation preserves the pathname, query string, and hash.

Written by the indexing model from the issue text.

Description

🐞 bug
Describe the Bug

The RichText component's routeHandler method builds the navigation destination using only target.pathname and target.hash, omitting target.search. Internal links with query parameters lose their query string during client-side routing.

const destination = target.hash ? `${target.pathname}${target.hash}` : target.pathname;
To Reproduce
  1. Add an internal link with query parameters to a Rich Text field in Sitecore, e.g. /my-page?type=foo&section=bar
  2. Render it using the Rich Text component in a Vue 3 JSS app
  3. Click the link
  4. The app navigates to /my-page and query parameters are stripped
Expected Behavior

The full URL including query string should be preserved during SPA routing

Possible Fix

Include target.search alongside with the target.hash and target.pathname

Provide environment information
  • Sitecore Version: 10.4.1 + JSS 22.0 (Headless)
  • JSS Version: @sitecore-jss/sitecore-jss-vue 22.9.1
  • Browser Name and version: not browser specific
  • Operating System and version (desktop or mobile): not OS specific
  • Link to your project (if available): N/A
Dominant language
TypeScript
Stars
274
Forks
274
Avg merge
11m
Merged PRs (30d)
1

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from Sitecore/jss

All issues in Sitecore/jss

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.