Example without `next-redux-wrapper` about connected-next-router HOT 6 CLOSED

I think the most simple implementation would be something like this:

import { createStore } from 'redux'

function initStore() {
  // all store initialization logic
  return createStore();
}

export default function App({ Component, pageProps }) {
  const [store, setStore] = useState(initStore)

  useEffect(() => {
    /** 
    initialize the app after mount if initStore should behave different 
    in server and client, to avoid hydration issues.
    **/
    setStore(initStore());
  }, []);

  return (
    <Provider store={store}>
      <ConnectedRouter>
        <Component {...pageProps} />
      </ConnectedRouter>
    </Provider>
  )
}

from connected-next-router.

Hey @danielr18 still working in this area as I've run into a strange issue. If I've got a separation in my store initializer around if window is defined or not (if it's CSR or not), would I want to run:

  const routerMiddleware = createRouterMiddleware()
  const { asPath, pathname, query } = context.ctx || Router.router || {};
  let initialState
  if (asPath) {
    const url = format({ pathname, query })
    initialState = {
      router: initialRouterState(url, asPath)
    }
  }
  return createStore(rootReducer, initialState, applyMiddleware(routerMiddleware))

for both cases?

edit: No problem. I just wanted to confirm my thoughts.

from connected-next-router.

@kylemh Probably, you would want to have the same initial state in the server and client to prevent hydrate mismatches.

What's the issue you are seeing?

from connected-next-router.

Hi @danielr18 I have issue with connected next router It affects all the push that have query params

from connected-next-router.

@Prof-isaac can you create a new issue and add more details?

from connected-next-router.

@danielr18 thanks for your quick response.
after wrapping my app with ConnectedRouter e.g



<Component {...pageProps} />

this router.push from next/router in my project gives me error, but when i remove the ConnectedRouter it will work properly
router.push({
pathname: home/${productName}/${id}/view,
query: { previousLabel }
})

here is the error====================>
Unhandled Runtime Error
TypeError: url.startsWith is not a function

Source
next-server\lib\router\router.ts (97:6) @ isLocalURL

95 | */
96 | export function isLocalURL(url: string): boolean {

97 | if (url.startsWith('/')) return true
| ^
98 | try {
99 | // absolute urls can be local if they are on the same origin
100 | const locationOrigin = getLocationOrigin()
Call Stack
Object.instance. [as push]
client\router.ts (165:13)
Show collapsed frames

from connected-next-router.