Наткнулся на эту проблему, никак не могу разобраться. Начнем с package.json:
{
"name": "temp",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-redux": "5.0.5",
"react-router": "^3.0.2",
"react-router-dom": "^4.1.1",
"react-router-redux": "^4.0.8",
"react-scripts": "1.0.10",
"redux": "3.7.2",
"redux-devtools-extension": "^2.13.2",
"redux-thunk": "^2.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Возможно, вы сможете заметить здесь пакет с какой-нибудь неправильной версией...
Далее, перейдем к созданию стора и синхронизации с историей:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import { Router, Route, hashHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
import reducer from './Reducers';
import History from './Components/History/History.js';
import SignForm from './Components/SignForm/SignForm.js';
const store = createStore(reducer, composeWithDevTools(applyMiddleware(thunk)));
const history = syncHistoryWithStore(hashHistory, store); // <---- this
ReactDOM.render(
<Provider store={store}>
<Router history={history}>
<Route exact path="/" component={SignForm} />
<Route path="/history" component={History} />
<Route render={() => {
return <div> Not Found! </div>;
}} />
</Router>
</Provider>,
document.getElementById('root')
);
registerServiceWorker();
Обратите внимание на <Router history={history}>
- ошибка аналогичная моей возникает в случае, если не присвоить роутеру history. Но это не мой случай, увы.
И, собственно, проблемный код:
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import {
changeName,
changePass,
authReset,
auth
} from '../../Reducers/User.js';
class SignForm extends Component {
render() {
...
}
}
function mapStateToProps(state) {
return {
user: state.user
}
}
function mapDispatchToProps(dispatch) {
return {
onNameChange: (event) => {
dispatch(changeName(event.target.value));
},
onPasswordChange: (event) => {
dispatch(changePass(event.target.value));
},
onSignIn: (name, password) => {
dispatch(authReset());
dispatch(auth('sign-in', name, password));
},
onSignUp: (name, password) => {
dispatch(authReset());
dispatch(auth('sign-up', name, password));
}
}
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(SignForm)); // <<<<<<<< this
В последней строке, если мы оборачиваем connect
в withRouter
, я получаю ошибку:
Warning: Failed context type: The context `router.history` is marked as required in `Route`, but its value is `undefined`.
in Route (created by withRouter(Connect(SignForm)))
in withRouter(Connect(SignForm)) (created by RouterContext)
in RouterContext (created by Router)
in Router (at index.js:23)
in Provider (at index.js:22)
Если withRouter
не используется, то и ошибки нет, но в таком случае стор не синхронизируется с событиями истории, что неправильно =(
В чем проблема?
Оборудование для ресторана: новинки профессиональной кухонной техники
Частный дом престарелых в Киеве: комфорт, забота и профессиональный уход
Сейчас по клику на ссылку a перезагружается информация в блоке с id="online-comm"
Это происходит, потому что вы вместо знака присваивания (=) используете знак сравнения (==)Изменять стиль нужно именно знаком =: