Nextjs pathname query parameters are undergoing decoding

Currently, we are receiving data from an API where the URL is used for navigation within the application. Within our link component, we pass a URL like 

<Link href={{ pathname: url , someOtherProperty }} />
, which typically appears as /path-to-page?query=value. However, when viewing the client, it shows up as /path-to-page%3Fquery=value. The URL displays correctly when not passing an object to href using <Link href={url} />. Additionally, attempts to use decodeURIComponent on the URL before passing it to pathname have proven unsuccessful due to its correctness being altered upon rendering.

Any suggestions or solutions would be greatly appreciated!

typescriptnext.js

Answer №1

When you utilize a URL object within the Link's href attribute, any value assigned to the pathname property will automatically be converted to percent-encoded format. If you wish to include query parameters, you can easily achieve this by using the query prop.

<Link href={{
    pathname: '/path-to-page',
    query: { query: 'value' }
}}>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering crashes while initializing the router in the constructor of a service in Angular 4.3

I've been scratching my head over this problem. It seems like I'm overlooking something simple. Let me show you what's inside my home.component.ts file: import { Component, OnInit } from '@angular/core'; import { AuthService } f ...

angulartypescriptangular2-routing

What is the best way to pass properties of a class instance to the super constructor of its parent?

Is there a way to transfer properties from a class to the parent's super constructor? ActionLog serves as the base class and is instantiated within a method in ActionRequestAccess ActionRequestAccess.ts export class ActionRequestAccess extends Actio ...

javascriptnode.jstypescript

Maintaining one's mental stability when working with NextJs can be quite a challenge as seen in this error message: TypeError: Cannot read properties of undefined (reading

I am in the process of building a portfolio website for myself using Sanity as the backend. The site is up and running, and the database is configured and functioning properly with Sanity studio. However, I am facing difficulties connecting it properly on ...

next.jssanity

The webp animation reveals every frame exclusively on mobile browsers like Chrome and Safari

[Powered by nextjs version 13 & deployed on vercel] I have incorporated an animated webp file (which offers a significant reduction in size compared to APNG) on my website. The intention is for it to display only one frame at a time from a series of frame ...

next.jsmobile-safarinext.js13webpapng

The property you are trying to access is not found within the declared type of 'IntrinsicAttributes & { children?: ReactNode; }'

In my React project created using Create-React-App, I have included the following packages (relevant to the issue at hand): "react": "^16.13.1", "react-dom": "^16.13.1", "react-router-dom": "^5.1.2", "react-scripts": "3.4.1", "typescript": "^3.9.2", "@typ ...

reactjstypescriptcreate-react-appreact-hocintrinsicattributes

Attempting to develop a server component that will transmit a JSON result set from a MySQL database located on the local server. What is the best method to send the server object (RowDataPacket) to the

After successfully rendering server-side pages and creating forms with react hooks for database updates, I encountered a challenge in integrating Ag-Grid into my application. Despite being able to retrieve data from the database using the mysql2 module and ...

javascriptmysqljsontypescriptnext.js

Can you provide guidance on how to access my account using the code that I have?

I'm having trouble getting the login functionality to work properly with this code. When I click the login button, nothing happens - no errors are displayed either. Can you help me identify what might be causing this issue? login() { var url = &ap ...

angulartypescriptionic-framework

Creating HTML elements dynamically based on the value of a prop within a React component

In my React component built using Typescript, it takes in three props: type, className, and children The main purpose of this component is to return an HTML element based on the value passed through type. Below is the code for the component: import React ...

reactjstypescript

Which TypeScript data type is most appropriate for referencing the match object within my props?

When working with React containers/components, how can I properly reference the 'match' component from React Router DOM? interface Props { match: any // <= What data type should I use in place of 'any'? } export class ProductCont ...

reactjstypescriptreact-router

Incorporating debounce functionality in React text input using lodash throttle and Typescript

I've been having trouble getting this text input throttle to function properly in my React project, despite spending a considerable amount of time reading documentation. import { throttle } from 'lodash'; ... <input type="t ...

reactjstypescriptlodashthrottling

Remix is throwing a Hydration Error while trying to process data mapping

While working on my Remix project locally, I encountered a React hydration error. One thing I noticed is that the HTML rendered by the server does not match the HTML generated by the client. This issue seems to be related to the Material UI library usage. ...

javascriptreactjstypescriptserver-side-renderingremix

Extract nested values within objects and arrays, and return the complete type of the original object

I have a dataset that resembles the structure of IconItems: { title: "Category title", description: "Example description", lists: [ { id: "popular", title: "Popular", items: [ { ...

typescript

What is the solution for resolving this Angular issue: Expected argument expression.ts(1135)?

While following a CRUD tutorial, I encountered an issue with the code. Even though I have verified that my code matches the tutorial's code, I am getting an error message saying "Argument expression expected. ts(1335)" in the submit method onSubmit(). ...

angulartypescriptvisual-studio-codeangular7crud

Is there a way to customize the "instanceof" functionality for an ArrayBuffer?

I've been working on a project that involves using threejs to draw a filled polygon based on its vertices. Initially, I started with a square and was able to get it working perfectly on its own. However, the real issue arose when I tried to integrate ...

typescriptthree.jswebgl

Retrieve properly formatted text from the editor.document using the VSCode API

I have been working on creating a personalized VSCode extension that can export the current selected file contents as a PDF. Although PrintCode exists, it does not fit my specific needs. The snippet of code I am currently using is: const editor = vscode.w ...

htmltypescriptpdfvisual-studio-codevscode-extensions

What is the method for showing an image from an external file using an image component?

I'm currently working on a project using React and Next.js. When I use a basic image tag like the example below, const IMG_API = 'http://localhost:5000/public/xIx0o7qgT-diet-nutrition.png'; <img src={IMG_API} ...

reactjsnext.js

Generating custom error messages with specified format when utilizing routing-controllers

I'm currently working on a Node APP that utilizes the routing-controllers library. In the README file, there is a section titled Throw HTTP errors, which includes a self-explanatory example. However, I encountered an issue when attempting to replicat ...

typescriptexpressrouting-controllers

What prevents me from employing my nestjs unique decorator within a constructor?

I am looking to develop a personalized decorator that fetches tenant information. This is the current code snippet I have: export type TenantInfo = { token: string id: string } export const TenantInfo = createParamDecorator( (data: unknown, cont ...

node.jstypescriptnestjs

Mastering the Art of Injecting Objects from the Server

Utilizing Angular Universal, I am serving my Angular application through an Express server. The objective is to embed an environment object (from the server) into my application. To achieve this, I have created an InjectionToken export const ENVIRONMENT ...

angulartypescriptexpressangular-universal

Encountering the "Error: data.map is not a function" issue within Next.js

I'm having trouble understanding why this first fetch call works perfectly: async function getData() { const res = await fetch('https://jsonplaceholder.typicode.com/todos') return res.json() } export default async function Home() { co ...

javascriptreactjsjsontypescriptnext.js