Menu
When I am calling withRouter I am able to see the output when the data renders the second time.
My component looks like this:
const Home = (props) => {
console.log("all props", props)
let { router } = props
let { category, item } = router.query
console.log("Cat", category)
console.log("Item", item)
return (
<FirebaseContext.Provider value={new Firebase()}>
<div>
<Head>
<title>Category</title>
</Head>
<Navigation />
{/* <Item category={category} item={item} {...props} /> */}
</div>
</FirebaseContext.Provider>
)
}
Home.getInitialProps = async (props) => {
console.log(props)
return { req, query }
}
export default compose(withRouter, withAuthentication)(Home)
If you look at console, the very first render looks like:
asPath: "/c/cigars/1231"
back: ƒ ()
beforePopState: ƒ ()
events: {on: ƒ, off: ƒ, emit: ƒ}
pathname: "/c/[category]/[item]"
prefetch: ƒ ()
push: ƒ ()
query: {}
Why is query empty even though it clearly recognizes the asPath?
550
There is no way to pass data between pages with Next's router. You would have to either use query strings as you mentioned, sessionStorage, or a state management option like Redux or React's Context API. You could then put that in your pages/_app.
In React JS, we would install a package called react-router-dom to implement routing inside the application. But Next JS has its own inbuilt router from the next/link , with which we can navigate between the pages. Before using the next/link , we need to set up the different pages/routes inside the pages folder.
When you use the useRouter hook it runs only on the client side for obvious reasons, but when nextjs is delivering the "component" to the browser it has no idea what router.query.q refers to, it's only when the component gets hydrated on the client side the react hook kicks in and you can then retrieve the queryString
The following is the definition of the router object returned by both useRouter and withRouter: pathname: String - Current route. That is the path of the page in /pages, the configured basePath or locale is not included.
The fact that router.query is not populated on the client (for SSG pages) on the first run is a design implementation detail. And you can monitor whether it's has been populated or not by checking the router.isReady boolean property. Show activity on this post.
This is what happens to the router.query on client when you hit /search?q=XXX The fact that router.query is not populated on the client (for SSG pages) on the first run is a design implementation detail. And you can monitor whether it's has been populated or not by checking the router.isReady boolean property. Show activity on this post.
This might have something to do with Automatic Static Optimization
Next.js documentation says:
Pages that are statically optimized by Automatic Static Optimization will be hydrated without their route parameters provided, i.e
querywill be an empty object ({}).
133
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
