I got this error, and it has taken me more than 2 hours debugging, but I still can’t understand where the problem is, I know this question might be down voted for low quality but at this moment I really need another pair of eyes.
Here I have App.js and Index, the problem seems to be in router but I don’t know why, because everything is done according to this repo.
App in src/App.js
import React from 'react';
import { connect } from 'react-redux';
import { ConnectedRouter} from 'connected-react-router';
import routes from './routes';
import './styles/main.scss';
const App = ({ history }) => {
return (
<ConnectedRouter history={history}>
{ routes }
</ConnectedRouter>
);
};
const mapStateToProps = (state) => {
return {
isAuthenticated: state.auth.isAuthenticated,
location: state.router.location.pathname,
};
};
export default connect(mapStateToProps)(App);
export { App as AppNotConnected };
Routes in src/routes/index.js
import React from 'react';
import { Route, Switch } from 'react-router';
import { HomeView, LoginView, ProtectedView, NotFoundView, NavBar } from '../containers';
import requireAuthentication from '../utils/requireAuthentication';
const routes = (
<div>
<NavBar />
<Switch>
<Route exact path="/" component={HomeView} />
<Route path="/login" component={LoginView} />
<Route path="/protected" component={requireAuthentication(ProtectedView)} />
<Route path="*" component={NotFoundView} />
</Switch>
</div>
);
export default routes;
I get this error
Uncaught TypeError: locationProp is undefined
The above error occurred in the <Router> component:
.
.
.