Маршрутизатор React не перерисовывает после изменения состояния

У меня есть такой реагирующий компонент с роутером. Это отобразит страницу входа в систему, если логин, переданный реквизитом, является ложным. Реквизит подпитывается состоянием редукции.

const Root = ({logged, history}) => {
  console.log(logged);
  return (
    <div className="App">
      <Router history={history}>
        <div>
          <Route exact path="/" component={ATM} />
          <Route path="/login" component={LoginForm}/>
        </div>
      </Router>
      //Removed without effect-->{!logged ? <Redirect to="/login"/> : ""}
    </div>
  )
};

const fromState = (state) => ({
  logged: state.auth.logged
});

export default connect(fromState)(Root)

В моем компоненте входа в систему я взломал вызов, который спрашивает сервер, успешно ли пользователь прошел аутентификацию и перенаправляет, если это так.

this.props.dispatch(action).then((result) => {
  let responseCode = result.payload.status;
  if(responseCode === 200) {
    this.props.dispatch(push("/"))
  }
})

В своем приложении я определил историю как таковую:

let blankHistory = createHistory();
let store = storeCreator(blankHistory);
const history = syncHistoryWithStore(blankHistory,store );

Создатель хранилища применяет промежуточное ПО и редукторы, принимает в качестве аргумента историю, потому что она нужна routerMiddleware.

После этого вызывается изменение состояния, logged становится истинным, путь в моем браузере меняется, объект истории знает об этом изменении пути, но я все еще вижу визуализированный компонент Login, и console.log(logged) не вызывается во второй раз.

Кто-нибудь знает, в чем собственно проблема?

- РЕДАКТИРОВАТЬ - После небольшого исследования я добавил этот битовый код в init:

let history = syncHistoryWithStore(blankHistory,store );
console.log(history.location)
history.listen((something) => {
  console.log(something)
});

И история в первом журнале имеет правильный путь, но сразу после этого история получает имя пути: "/", и это может быть причиной проблемы.


person Haito    schedule 18.07.2017    source источник
comment
Первая проблема, которую я вижу, - это <Redirect/> за пределами <Router/> компонента. Попробуйте переместить его внутрь <Router/>, а затем проверьте, сохраняется ли проблема.   -  person Tomasz Cichociński    schedule 18.07.2017
comment
У меня все еще есть проблема, если я удалю эту переадресацию   -  person Haito    schedule 18.07.2017


Ответы (1)


Проблема заключалась в несовместимых версиях react-redux-router и react-router. Я обновил первый, и он работает как шарм.

person Haito    schedule 18.07.2017