I'm using the example with-redux-persist repo paired with next.js found here: https://github.com/vercel/next.js/tree/canary/examples/with-redux-persist
When using a custom loading component, adding a query parameter to the URL, ie ?test=123, causes the page to hang on loading indefinitely. There are no errors reported in console and the redux state info looks clean.
Here is my _app.js I'm using to test this:
import { useStore } from '../store'
import { Provider } from 'react-redux'
import { persistStore } from 'redux-persist'
import { PersistGate } from 'redux-persist/integration/react'
export default function App({ Component, pageProps }) {
const store = useStore(pageProps.initialReduxState)
const persistor = persistStore(store)
return (
<Provider store={store}>
<PersistGate loading={<div>Loading</div>} persistor={persistor}>
<Component {...pageProps} />
</PersistGate>
</Provider>
)
}
You can reproduce it by cloning the above repo, modifying _app.js to look like above, starting the server with yarn dev and then finally visiting http://localhost:3000/?test=123.
Any help or insight into why this is occurring is appreciated!