score:7
i think you can try to json.stringify
the object and then json.parse
it back
example
pages/index.js
import link from 'next/link';
export default () => {
const object = {
key1: 'value1',
key2: 'value2'
};
return (
<link href={{ pathname: '/about', query: { object: json.stringify(object) } }}>
<a>here</a>
</link>
);
};
pages/about.js
import { withrouter } from 'next/router';
function about({ router: { query } }) {
const object = json.parse(query.object);
return (
<div>
about {object.key1} | {object.key2}
</div>
);
}
export default withrouter(about);
hope this helps!
Source: stackoverflow.com
Related Query
- With NextJS Link, How to pass object clientside?
- Nextjs - How to pass params to server router with Link
- how to pass object as params in Router.push() in nextjs and access that object in other component
- how to pass 'auth' or 'profile' object to firestoreConnect() with react-redux-firebase?
- How to pass object with history.push in react-router v5?
- How to link same page with two urls in nextjs
- How to pass a variable with text and a link into a React element
- How can I pass down through props a string of text with a link embedded within?
- How to pass object with known fields as props in react
- ReactJS: How to pass functions with a link to another component?
- Using React Jest Enzyme - How to pass a constructor object to my component with Shallow?
- How do I wrap link router with back-ticks to a card and pass a variable to it Reactjs?
- How to pass an object with onClick React?
- How to pass props/params/state to a Route with Link in React Router 5.2.0?
- How to pass an object through Link
- how to test props which is pass through Link in react router with React-testing-library or jest
- How to pass function as prop in react routerv5 with the Link tag
- How pass an object to a child custom React functional component with Typescript
- How do I use Nextjs Link tag along with data dismiss attribute?
- How to pass both image file and object with values from React and retrieve it on the Node.js (express) server?
- How to get data from an object with arrays/strings and then pass that data to a React component
- How to pass params with history.push/Link/Redirect in react-router v4?
- How to mock/replace getter function of object with Jest?
- React.js -- How to pass properties object to child component?
- Pass object through Link in react router
- How to pass props to Screen component with a tab navigator?
- How to use object spread with nested properties?
- How to pass props to keyframes in styled-component with react?
- How to pass Header JWT Token with Axios & React?
- How to deploy NextJS with NGINX?
More Query from same tag
- Why I have a loop in my react application?
- Data to be stored in array at particular index
- Validation in React Hook Form to make sure at least one checkbox is checked?
- how do i rewrite my firebase.json file so i can see all my pages
- how to scrolled according to content using react js?
- TypeError: Cannot destructure property 'list2' of 'undefined'
- Save axios response to state react hooks
- normalize response in reducer got type error
- How to use Material colours in react styled components?
- How to select a <td> with a specific value?
- Dynamic Table updates "too late" ReactJS
- A <Router> may have only one child element Error in react
- Difficulty getting parameters passed in through a route to appear with the reddit appi in react
- How can I pass variables to function from onClick in Meteor/React?
- How to pass data from API using useContext?
- Cannot delete product item from Firebase
- reactjs ES6: Unable to understand the syntax
- Encode PDF to base64 in ReactJS
- Store Values from Material UI's form in TypeScript
- Capture second part of the string using regular expression
- Using AWS clients at the global level in React?
- Firebase FCM React project issue - firebase-messaging-sw.js wrong type?
- Check in an array ids are equals to dispatch the id value
- Remove all elements which is duplicated in another array in ES6 syntax
- Validate email input field form element
- Radio Buttons with Styled Components for React
- Request Deferrer with Service Worker in PWA
- React env variables with .env
- I can't get a response from github api using redux with react.js
- How to enable https for webpack-dev-server with own certificate?