skip to Main Content

I want to hide query params or query parameter, i want to show custom url on naviagation in Next.js 14.
For example /user/12 expected output /user

Can anyone help me out here.

import { useRouter } from 'next/navigation';
const router = useRouter();
<DropdownMenuItem onClick={() => router.push(`${ASSESSMENTS}/answer-code?assessmentId=${assessment.id}`)} >Upload Answer</DropdownMenuItem>

2

Answers


  1. There is probably a much simplier way and it’s not nextjs specific but i would store the variables in localstorage. Add parameters to localstorage on click, remove parameters when task on second page is finished.

    Login or Signup to reply.
  2. With Dynamic Routes you could do:

    `/some-path/answer-code/${assessment.id}`
    

    The page file path would look like this:

    /app/some-path/answer-code/[assessmentid]/page.js
    

    Inside the page you have access to assessmentid. Read about Dynamic Routes for more options and great explanation.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search