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

Don't support for react-router-doom v6 #550

Open
HipSiGa opened this issue Jan 16, 2022 · 6 comments
Open

Don't support for react-router-doom v6 #550

HipSiGa opened this issue Jan 16, 2022 · 6 comments

Comments

@HipSiGa
Copy link

HipSiGa commented Jan 16, 2022

This middleware can't help for react-router v6. Please fix it.

@fedorovsky
Copy link

fedorovsky commented Jan 17, 2022

This middleware can't help for react-router v6. Please fix it.

I'm looking forward to these changes too.
#543

@ConstantinChirila
Copy link

By the looks of it this package is dead in the water, and it doesn't seem it might actually be updated any time soon. There are a few PR's opened, and no merged since November.
Id suggest at looking for alternatives. I know i will do the same.

PS. Not throwing shade at the owner, i know OSS can be hard sometimes.

@HipSiGa
Copy link
Author

HipSiGa commented Jan 26, 2022

i had resolved this issues with this npm package https://github.com/lagunovsky/redux-react-router. It's same with connected react router

@salvoravida
Copy link

Switch to redux-first-history: https://github.com/salvoravida/redux-first-history
support react-router v6 and is issues-free!

@D3Pheonix
Copy link

@HipSiGa it works on react v18 ?

@gkamesh98
Copy link

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.

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

6 participants