React-router: the context `router.history` is marked as required in `Route`

363
23 июля 2017, 12:29

Наткнулся на эту проблему, никак не могу разобраться. Начнем с 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 не используется, то и ошибки нет, но в таком случае стор не синхронизируется с событиями истории, что неправильно =(

В чем проблема?

READ ALSO
Как перезагрузить блок с интервалом?

Как перезагрузить блок с интервалом?

Сейчас по клику на ссылку a перезагружается информация в блоке с id="online-comm"

367
Как упростить массив?

Как упростить массив?

Если правильно понял вопрос:

228
Mongoose Model не сохраняет поле типа `Object`

Mongoose Model не сохраняет поле типа `Object`

Хочу сохранить модель после изминений:

289
Почему заголовок не моргает?

Почему заголовок не моргает?

Это происходит, потому что вы вместо знака присваивания (=) используете знак сравнения (==)Изменять стиль нужно именно знаком =:

264