Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

When will the support come for react@18? #616

Open
silvanoamaral opened this issue May 3, 2024 · 6 comments
Open

When will the support come for react@18? #616

silvanoamaral opened this issue May 3, 2024 · 6 comments

Comments

@silvanoamaral
Copy link

No description provided.

@gkamesh98
Copy link

gkamesh98 commented May 7, 2024

I think currently they don't provide support in near future. If you still want to use it with react-router@v6. You can make small tweak as follows.
Instead of using the
ConnectedRouter
You can make following default react-router Router component and make changes as follows

import React, { useLayoutEffect, useRef, useState } from 'react'
import { Route, Router, Routes } from 'react-router-dom'

import { createBrowserHistory } from 'history'
import { useDispatch } from 'react-redux'
import { onLocationChanged } from 'connected-react-router'

const history = createBrowserHistory()

export default ({ children }) => {
  const isFirstRender = useRef(true)
  const dispatch = useDispatch()
  const [historyState, setHistoryState] = useState({
    action: history.action,
    location: history.location,
  })

  useLayoutEffect(() => {
    return history.listen(setHistoryState)
  }, [])

  useLayoutEffect(() => {
    if (isFirstRender.current) {
      dispatch(onLocationChanged(history.location, history.action, true))
      isFirstRender.current = false
    }
    return history.listen((arg) => {
      dispatch(onLocationChanged(arg.location, arg.action, false))
    })
  }, [dispatch])

  return (
    <Router
      // ...rest of props required
      location={historyState.location}
      action={historyState.action}
      navigator={history}
    >
      {/* here it lies <Routes> <Route> ..... */}
      {children}
    </Router>
  )
}

Rest of it is same as before.
I hope it is helpful. Thank you.

@silvanoamaral
Copy link
Author

Hi @gkamesh98 Thank you for your help.

But, I tried to execute the suggestion and presented the error below.

ERROR in ./node_modules/connected-react-router/esm/ConnectedRouter.js 113:0-38 Module not found: Error: Can't resolve 'react-router'

@pierroberto
Copy link

Is there any other alternative?

@gkamesh98
Copy link

gkamesh98 commented Jun 4, 2024

Hi @silvanoamaral ,
Can you check is react-router package is installed because connected-react-router has react-router as peerDependency.

Basically if you have react-router-dom it will install react-router as well if you check in package-lock.json or yarn.lock.

@gkamesh98
Copy link

Hi @pierroberto ,
As react-router routing api is updated. So, we need to get the package update. Or we will have to move to alternative package. But redux actions are also update as a part of it. If you are thinking of update. If you thinking fresh update. You can go for the complete different package for integrating redux and router-router. One of it could be "redux-first-history"

@mrsegaexplains
Copy link

@gkamesh98 redux-first-history is not supporting immutable data structures as connected-react-router. Any solution for that?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants