Tried almost everything available on the Internet, and couldn't resolve the problem. When I installed react-router-dom
and added Routes
and BrowserRouter
into my project, I faced this problem:
Uncaught TypeError: Cannot read property 'func' of undefined
and in bundled index.js
there is a line where app fails:
var func = _react.PropTypes.func,
Found some solutions stating that react-router 3.2.0
should be used, but that is not the point. I want to use new react-router-dom
, currently, installed version is :
"react-router-dom": "^4.4.0-alpha.1",
NOTE: Please don't mention
PropTypes
, I know that they've moved in a separate library and I didn't use them in my project.
EDIT: Routes code:
import React from 'react';
import {Route, Switch, BrowserRouter} from 'react-router-dom';
//import createHashHistory from 'history/createHashHistory';
import App from './App';
import Login from './components/Login/Login';
import PrivateRoute from './components/PrivateRoute/PrivateRoute';
import Unauthorized from './components/Unauthorized/Unauthorized';
//const history = createHashHistory();
const Routes = () => (
<BrowserRouter>
<Switch>
<Route exact path="/login" component={Login}/>
<Route exact path="/unauthorized" component={Unauthorized}/>
<PrivateRoute exact path="/" component={App}/>
</Switch>
</BrowserRouter>
);
export default Routes;
PrivateRoute component code:
import React, {Component} from "react";
import {bindActionCreators} from "redux";
import {Redirect, Route} from "react-router-dom";
import {connect} from "react-redux";
import * as authActions from '../../redux/actions/authActions';
class PrivateRoute extends Component {
render() {
let {component: Component, loggedUser, ...rest} = this.props;
return (
<Route {...rest} render={(props) => (
loggedUser ?
<Component {...props}/>
:
<Redirect
to={{
pathname: "/login",
state: {from: props.location}
}}
/>
)}/>
);
}
}
function mapStateToProps(state, props) {
return {
loggedUser: state.loggedUser
}
}
function mapDispatchToProps(dispatch) {
return {
authActions: bindActionCreators(authActions, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(PrivateRoute);