Comments (2)
yeah, we really need this support, guys
I have tried this library - redux-first-history as a replacer for connected-react-router to bind react-router v6 with redux, but it works only with react 17, not with 18 (it causes an infinite loop error if you use rr6 Navigate component)
from connected-react-router.
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.
from connected-react-router.
Related Issues (20)
- Missing typing for the default component property `children` for react@17 HOT 1
- Can't install package with React 18.1 HOT 5
- `history.replace` is not working after upgrading to 6.9.2 version HOT 1
- Type '{ children: () => Element; history: History<unknown>; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<ConnectedRouter<unknown>> & Readonly<ConnectedRouterProps<unknown>>'. HOT 5
- Add support for react-redux v8.0.2
- Support [email protected] HOT 1
- Is connected-react-router compatible with react 18? HOT 10
- This project appears to be out of maintenance HOT 3
- Upgrade peer dependencies to support React 18 HOT 1
- When will support react@18 & [email protected] & [email protected] HOT 1
- Incompatibility with history.listen with history@5
- Redirect not working in react-router-dom v6 HOT 1
- Expose an Error Handler
- How to reset the states with connect-react-router HOT 1
- VSCode - Integrated Console stops responding
- When will the support come for react@18? HOT 2
- Is the project DEAD??? HOT 2
- link button not working second when i added new maincategory, it is rendering same component intead of going path
- When will the support come for react@18? HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from connected-react-router.