supasate / connected-react-router

A Redux binding for React Router v4
MIT License
4.73k stars 593 forks source link

When will support react@18 & react-redux@8.0.2 & react-router@6.3.0 #588

Open luciferyue opened 2 years ago

luciferyue commented 2 years ago

When will support be updated?

gkamesh98 commented 6 months ago

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 ..... /} {children} ) } ` Rest of it is same as before. I hope it is helpful. Thank you.