пробовал свои силы в React / Redux, следуя учебному пособию по части 3: https://tighten.co/blog/react-101-routing-and-auth.
Часть 1 и 2 была замечательной до части 3, где я столкнулся с ошибкой в названии.Я почти уверен, что до этого момента хорошо следовал учебному пособию.
Любая помощь очень ценится.Заранее благодарен ТАК.
The above error occurred in the <ConnectedRouter> component:
index.js:1446
in ConnectedRouter (at App.js:39)
in App (created by Context.Consumer)
in Connect(App) (at src/index.js:11)
in Provider (at src/index.js:10)
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './containers/App';
import { Provider } from 'react-redux';
import { configureStore } from './store/configureStore';
const store = configureStore();
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('app')
)
App.js
import React from 'react';
import { ConnectedRouter } from 'react-router-redux';
import { Route, Redirect } from 'react-router-dom'
import { history } from './../store/configureStore';
import { connect } from 'react-redux';
import Header from '../containers/Header';
import Home from '../containers/Home';
import Signup from '../containers/Signup';
import Login from '../containers/Login';
import Favorites from '../containers/Favorites';
const PrivateRoute = ({component: Component, authenticated, ...props}) => {
return (
<Route
{...props}
render={(props) => authenticated === true
? <Component {...props} />
: <Redirect to={{pathname: '/login', state: {from: props.location}}} />}
/>
);
};
const PublicRoute = ({component: Component, authenticated, ...props}) => {
return (
<Route
{...props}
render={(props) => authenticated === false
? <Component {...props} />
: <Redirect to='/favorites' />}
/>
);
};
class App extends React.Component {
render() {
return (
<ConnectedRouter history={history}>
<div>
<Header />
<div className="container">
<Route exact path="/" component={ Home }/>
<PublicRoute authenticated={this.props.authenticated } path="/signup" component={ Signup } />
<PublicRoute authenticated={this.props.authenticated } path="/login" component={ Login } />
<PrivateRoute authenticated={this.props.authenticated } path="/favorites" component={ Favorites } />
</div>
</div>
</ConnectedRouter>
);
}
}
const mapStateToProps = (state) => {
return { authenticated: state.auth.authenticated };
};
export default connect(mapStateToProps)(App);
ConfigureStore.js
import { createStore, compose, applyMiddleware } from 'redux';
import ReduxPromise from 'redux-promise';
import rootReducer from '../reducers';
import createHistory from 'history/createBrowserHistory';
import { routerMiddleware } from 'react-router-redux';
export const history = createHistory();
export function configureStore(initialState) {
const store = createStore(
rootReducer,
initialState,
compose (
applyMiddleware(ReduxPromise, routerMiddleware(history)),
window.devToolsExtension ? window.devToolsExtension() : f => f
)
//window.devToolsExtension ? window.devToolsExtension() : undefined
);
if (module.hot) {
// Enable Webpack hot module replacement for reducers
module.hot.accept('../reducers', () => {
const nextRootReducer = require('../reducers').default;
store.replaceReducer(nextRootReducer);
});
}
return store;
}