Comments (23)
The problem is you don't have router
in your state when HMR patch applying. You should wrap your rootReducer into connectRouter
function.
store.replaceReducer(nextRootReducer); // your code now (probably)
to:
store.replaceReducer(connectRouter(history)(nextRootReducer)); // how it should be done
from connected-react-router.
not sure if related but I was having similar if not identical error due to importing the wrong ConnectedRouter.
import { ConnectedRouter } from 'connected-react-router'
instead of
import { ConnectedRouter } from 'connected-react-router/immutable'
from connected-react-router.
I am getting this issue in my environment, but the suggested solution is not working in my case:
This is my setup:
My codes
Store.js
import { applyMiddleware, createStore, compose } from 'redux';
import thunk from 'redux-thunk';
import { createBrowserHistory } from 'history'
import { connectRouter, routerMiddleware } from 'connected-react-router';
import rootReducer from '../Redux/Reducers/RootReducer';
export const History = createBrowserHistory();
const initialState = {};
const middleware = [
routerMiddleware(history),
thunk
];
const enhancers = [];
if (process.env.NODE_ENV === 'development') {
enhancers.push(window.__REDUX_DEVTOOLS_EXTENSION__ && __REDUX_DEVTOOLS_EXTENSION__())
}
const Store = createStore(
connectRouter(history)(rootReducer),
initialState,
compose(
applyMiddleware(...middleware),
...enhancers
)
);
export default Store;
App.js
import React from 'react';
import { render } from 'react-dom';
import { Route, Switch } from 'react-router';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'connected-react-router';
import Store, { History } from './Redux/Store';
import RaiseIssuePage from './Pages/Issue/New';
import HomePage from './Pages/Index';
const PageRoutes = () => (
<div id="PageRouters">
<Switch>
<Route exact path="/" component={HomePage} />
<Route path="/issue/new" component={RaiseIssuePage} />
</Switch>
</div>
);
class App extends React.Component {
render() {
return (
<Provider store={Store}>
<ConnectedRouter history={History}>
<PageRoutes />
</ConnectedRouter>
</Provider>
);
}
}
render(<App />, document.getElementById('App'));
PageActions.js
import {INITIATE_PAGE } from '../Type';
export const initiatePage = (pageName) => (dispatch) => {
console.log('initiatepageActions');
dispatch({
type: INITIATE_PAGE,
payload: {pageName: pageName}
});
}
PageReducer.js
import { INITIATE_PAGE } from '../Type';
const initialState = {
pageName: '',
issuePlace: {}
}
export default (state = initialState, action) => {
switch (action.type) {
case INITIATE_PAGE:
const pageData = Object.assign({}, state, action.payload);
return pageData;
default:
return state;
}
}
RootReducer.js
import { combineReducers } from 'redux';
import PageReducer from './PageReducer';
export default combineReducers({
page: PageReducer
});
Error
This is the error which I am getting:
More info
In my HomePage
component, I have a call on initiatePage
which is available in PageAction.js
. This is what clearly gives me this error and then what I get a blank page in the browser. When commenting out this line, everything went smooth, leaving a couple of warning messages which are pretty much same which you can see in the image above.
The error indication is exactly the same as the original thread, but the suggested solution by @iceekey is not working in my case (as you can see, I have already added it in my code).
I really lost here. Any help on this issue is really appreciated. Thank you.
from connected-react-router.
@progammer-rkt
Did you ever resolve this issue? I'm having very similar issue and very similar code.
from connected-react-router.
Seems like issue is resolved. Thanks, @iceekey
from connected-react-router.
Could you inspect more whether which LOC causes that error and what's the value of state in your redux store?
from connected-react-router.
I'm using hot modules replacement
. The error does not appear before a hot module update happens. But if I edit source of some component and it hot updates, this happens.
Also looks like this exception is the cause why hmr
does not work causing full page reload atm:
It's hard to trace what happens atm since hmr
is broken.
I'm using "react-hot-loader": "^3.0.0-beta.6",
and "webpack": "^2.5.1",
I'll try to provide more details if I'll be able to debug this.
from connected-react-router.
var _toJS = toJS(getIn(context.store.getState(), 'router.location')),
pathnameInStore = _toJS.pathname, // Looks like this code causes this
searchInStore = _toJS.search,
hashInStore = _toJS.hash;
// Extract history's location
When this happens _toJS = undefined
from connected-react-router.
hmm, just before that I got a warning:
Unexpected key "router" found in previous state received by the reducer. Expected to find one of the known reducer keys instead: "form", [STRIPPED]. Unexpected keys will be ignored.
from connected-react-router.
I just tried downgrading, seems like this is not related to the fact I did upgrade recently.
So my sentence
I did not notice such behaviour with previous versions.
makes no sence. I checked with previous versions of connected-react-router
, react-router
and react-router-dom
, and the issue is still there.
Seems like router.location
which is passed to somehow is not actual in some case. Cannot find out why. Issue is located here: https://github.com/supasate/connected-react-router/blob/master/src/ConnectedRouter.js#L32
from connected-react-router.
That's interesting. Could you provide me a minimal repo that reproduces this problem? I'll try working on it then.
from connected-react-router.
Well, that's not easy, I'll try to provide one later this week.
from connected-react-router.
Thanks, @dimatter but that did not help. :(
from connected-react-router.
@iceekey Thanks a lot! The seem very reasonable. I tried this and after quick check did not face my issue. I'll work with this for some time and will report later if the issue is completely resolved.
from connected-react-router.
+1
from connected-react-router.
@progammer-rkt did you find a solution? Im having the same problem or similar problem, im getting Warning: Failed prop type: The prop action (and location) is marked as required in ConnectedRouter, but its value is undefined.
from connected-react-router.
Ohh well, 3 hours later ... I had these problems because i use a custom immutableJS solution, ie my top reducers are not Immutable but their children are. So my state looks similar to this:
jsObjReducer = {
imJsObject: Map()
}
So i access my state by doing state.jsObjReducer.get('imJsObject');
not state.getIn(['jsObjReducer', 'imJsObject'])
. And i had accidentally converted the router state to an immutable so when ConnectedRouter
tried to access those vars by doing router.location it threw an error of course since my accidental conversion to ImJs obj before.
The provided solution for ImJs with connected-react-router
doesnt work in my case because my top level reducers arent immutable (i dont use combineReducers from 'redux-immutable'; for my top level reducers, instead i use it from redux).
My solution was rather simple when i finally understood what went wrong, simply to not convert router state to immutable. I check if it is router
let plain = JSON.parse(unescape(window.__INITIAL_STATE__));
for (const key in plain) {
if (key !== 'router') {
initialState[key] = Immutable.fromJS(plain[key]);
}
}
from connected-react-router.
@progammer-rkt
I found a typo in your store. You declare the const History like this : export const History = createBrowserHistory();
then use it like this routerMiddleware(history), and connectRouter(history)(rootReducer),
. shouldn't it be this routerMiddleware(History), and connectRouter(History)(rootReducer),
?
from connected-react-router.
<Provider store={store}>
<ConnectedRouter history={history}>
<div>
<Switch>
<Route exact path="/" render={() => (<div><App/></div>)} />
<Route render={() => (<div>Miss</div>)} />
</Switch>
</div>
</ConnectedRouter>
</Provider>
Replace the above code in index.js it will work
from connected-react-router.
can someone help me with the issue
from connected-react-router.
can someone help me with the issue
I am getting the same code error as yours.
Did you fix the bug?
from connected-react-router.
in line 11;
replace href by to
from connected-react-router.
Hi All,
I am new in react, Please anyone help me,
how to resolve this error.
This happened, when I am deleting record.
and also no href and anchor tag in my app.
Thanks
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 8
- 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
- Will support react-router v6 and history v5? HOT 2
- 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 1
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.