Next.js: Router.push with state

mike_plumbs

I'm using next.js for rebuilding an app for server side rendering. I have a button that handles a search request. In the old app, the handler was this one: search = (event) => { event.preventDefault(); history.push({ pathname: '/results', state: { pattern: this.state.searchText, } }); } In the results class, I could get the state date with this.props.location.state.pattern. So now I'm using next.js: import Router, { withRouter } from...

Originally asked by DaFunkyAlex on Stack Exchange (stackoverflow) (CC BY-SA 4.0).

uphilltech

Great question — answering as the UphillTech team:

In next.js you can pass query parameters like this Router.push({ pathname: '/about', query: { name: 'Someone' } }) and then in your next page (here in /about page), retrieve the query via the router props, which needs to be injected to Component by using withRouter . import { withRouter } from 'next/router' class About extends React.Component { // your Component implementation // retrieve them like this // this.props.router.query.name } export default withRouter(About)

Full answer by Prithwee Das: https://stackoverflow.stackexchange.com/a/55182740 (CC BY-SA 4.0).

Need it done for your business? UphillTech.