lagunovsky / redux-react-router Goto Github PK
View Code? Open in Web Editor NEWA Redux binding for React Router v6
License: MIT License
A Redux binding for React Router v6
License: MIT License
The new React-redux version (v8) is , in theory, fully backward compatible. (https://github.com/reduxjs/react-redux/releases)
Is there any way to support also this version?
It would be great if we could have a release of this library for react-redux 9. Maybe it is enough to just update the package.json?
After I upgraded to "react-router-dom": "^6.15.0"
, I've got this error:
Uncaught Error: You cannot render a <Router> inside another <Router>. You should never have more than one in your app.
Here is my Routes component
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
const router = [
{
path: '/',
element: <DashboardRouteLayout />,
children: [
{
path: '/',
element: <RouteWrapper component={Home} />,
},
],
},
]
const Routes = () => {
return (
<ReduxRouter history={history}>
<RouterProvider router={createBrowserRouter(router)} />
</ReduxRouter>
)
};
export default Routes;
Currently main component is plain Router component. With recent changes in React-router v6.4+ some hooks can only run if you are using data routers like createBrowserRouter
or BrowserRouter. Using embed Router component makes this library incompatible with new updates.
Since we have a constant const ROUTER_REDUCER_MAP_KEY = 'router'
storing reducer with key 'navigator'
like in example doesn't work:
const rootReducer = combineReducers({ navigator: createRouterReducer(history) })
I need use createHashRouter function. How i can use it with your library?
I seem to be having an issue with this. The error seems to occurr from the ReduxRouter provider, or atleast where it is called.
I am using
"react-dom": "^18.2.0",
"react-router": "^6.3.0",
"react-redux": "^8.0.2",
"react-router-dom": "^6.3.0",
"react-scripts-ts": "2.17.0",
"redux": "^4.2.0",
"redux-saga": "^0.16.0",
"redux-thunk": "^2.2.0",
import {createBrowserHistory} from "history";
const history = createBrowserHistory()
const store = configureStore(history, {}, rootSaga);
const render = () => {
createRoot(document.getElementById("root") as HTMLElement).render(
<Provider store={store}>
<ReduxRouter history={history}>
<App/>
</ReduxRouter>
</Provider>,
);
}
render();
Any suggestions?
Not sure if something is missing in my config but I noticed after changing location with Link component, Browser's ( Chrome ) back button seems to not triggering ON_LOCATION_CHANGED action which causes app to go blank screen.
in the examples reducers.tsx there should be createRouterReducer
instead of connectRouter
in import?
Seems like there is an issue with ReduxRouter
component.
When navigating between two routes, on the first location change, there is an error in the console saying:
Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};` class property with the desired state in the ReduxRouter component.
I might point you in the right direction or completely in the wrong direction, but when I disable StrictMode, the error is gone. It would be nice to work with StrictMode enabled as well, tho.
EDIT: I just had a look at the ReduxRouter
component implementation. There is a setState
call in the constructor. I believe moving the this.removeHistoryListener
listener to componentDidMount
would remove the error, but I'm not sure if that's the right solution.
Hello,
I'm creating this issue because the package seems to be very promising to me and I have not found any alternative for the connected-react-router that is compatible with the newest versions of react router.
I'm wondering whether the current 2 contributors plan to continue the maintenance of the package in long term? ๐ค Or, are you guys looking for contributors too? I saw on NPM that the weekly download is increasing and I guess if there is no bigger concurrency, this package could be the one that people use for this purpose ๐ช
Thanks a lot so far and in advance.
Hi,
I'm hoping this is just a ts issue but I am getting this error when trying to use this in my project
e.g.
// in main App... <ReduxRouter history={browserHistory} store={store}> <Routes> <Route path={
user/} element={<User/>} /> <Route path={
settings/`} element={} />
// in User component...
<Route path={change_password
} element={} />
<Route path={change_address
} element={} />
`
In React Router v6 nested routing is supported and recommended. Is it possible to fix this?
Hello,
after implementing redux-react-router into my project my ProtectedRouter Component always seems to fall on the fallback return case ()
Obviously I am doing something wrong. Could you kindly point out where I should look into?
Thanks in advance
Is it possible to support also react v16?
I am getting this error in Create React App. Was this component not achievable with functional components and hooks?
Missing class properties transform.
69 | }
70 | class ReduxRouter extends React.Component {
> 71 | removeHistoryListener;
| ^^^^^^^^^^^^^^^^^^^^^^
72 | removeStoreSubscription;
73 | timeTravelling = false;
74 | static defaultProps = {
Currently trying to implement this due to being unable to use react router V6 and history v5 together, hoping this package can help.
Looks like I've configured everything correctly and routing works but it seems that if I visit a URL and then go to visit the same URL, there is no navigation between pages on my app. This happens with both user navigation (buttons on the components) as well as the browser back buttons. Quick example of my code and the issue I'm facing. From what I can tell the redux actions are firing correctly.
Routing Issue:
/tests
route
TestsPage
/test/test-id
route
TestView
page/tests
route
TestsPage
AppRouter.tsx
export const history = createBrowserHistory();
<ReduxRouter history={history}>
<Routes>
<Route path="/test/create" element={<TestCreatePage />}
<Route path="/" element={<Nav />}>
<Route path="tests" element={<TestsPage />} />
</Route>
<Route
path="/tests/:testId"
element={<TestView />}
/>
</Routes>
</ReduxRouter>
reducer.ts
const historyReducer = createRouterReducerMapObject(history);
export const rootReducer = combineReducers({
[api.reducerPath]: api.reducer,
[testSlice.name]: testSlice.reducer,
[authSlice.name]: authSlice.reducer,
...historyReducer,
});
storeConfig.ts
const historyMiddleware = createRouterMiddleware(history);
// Persist root reducer
const persistedReducer = persistReducer(persistConfig, rootReducer);
// Configure redux store using redux toolkit
const store = configureStore({
reducer: persistedReducer,
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
serializableCheck: {
// These actions are ignored to prevent errors during re-hydration
ignoredActions: [
FLUSH,
REHYDRATE,
PAUSE,
PERSIST,
PURGE,
REGISTER,
],
},
})
.concat(
api.middleware,
authListenerMiddleware.middleware
)
.prepend(historyMiddleware),
});
Sorry for the long wall of text, just wanted to get enough information across of my setup in hopes you can spot me doing something dumb ๐. Cheers!
EDIT: Main reason I'm doing this is so I can use history.push()
etc within functions/redux actions without issues. I've also been able to just about get away with it by using unstable_HistoryRouter
from react-router-dom
although unsure when support for that will end.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.