vercel / vercel/next.js

router.asPath includes hash fragment on client side

Open
#25,202 8 comments 13 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug linear: next Linking and Navigating not stale
Dominant language
JavaScript
Stars
142k
Forks
32.4k
Avg merge
2d 14h
Merged PRs (30d)
351

Description

What version of Next.js are you using?

10.0.9

What version of Node.js are you using?

14.15.4

What browser are you using?

n/a

What operating system are you using?

n/a

How are you deploying your application?

n/a

Describe the Bug

I have found that router.asPath contains the current hash fragment, if there is one, such as /my-page/#my-subheading.

This was unexpected to me. The docs mention that it includes the query string if there is one, but it doesn't say anything about the hash fragment.

Hash fragments never make it to the server side, and I'd expect the same behaviour from the router both client and server side, so it being included in this field feels to me like a bug.

Expected Behavior

router.asPath does not include a hash fragment.

To Reproduce
  1. Make a component which uses const router = useRouter().
  2. Have it output in some way router.asPath.
  3. Navigate to this page with a fragment as part of the URL.

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.

Research direction

Start by reproducing the issue with a component using the useRouter() entry point and a URL containing a hash fragment. Compare the client-side router.asPath value with the documented behavior, and consider the work complete when the expected value is confirmed by an appropriate regression test.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, nextjs
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.