使用react-router-dom后，网址已更改，但页面未重新呈现

Question

我正在为我的项目使用 react，redux，react-router ，我遇到了一个问题。

每当我使用 history.push（）或链接=''时，目标网站都不会呈现，但是刷新后，一切似乎又恢复了正常！

（在{./history中添加{forcefresh：true}似乎可以解决问题，但是还有其他方法可以解决！）

如您所见，isSignedIn在重定向后为空：

但是刷新后，它将获得true值。

我的减速器：

import { SIGNED_IN, SIGNED_OUT } from '../actions/actionTypes';

const initialState = {
  isSignedIn: null,
  userInfo: null,
};

export default (state = initialState, action) => {
  switch (action.type) {
    case SIGNED_IN:
      return { ...state, isSignedIn: true, userInfo: action.payload }; //important parts!
    case SIGNED_OUT:
      return { ...state, isSignedIn: false, userId: null };
    default:
      // return { ...state, isSignedIn: true, userInfo: action.payload };
      return initialState;
  }
};

Answer 1

在化简器中，当您执行未处理的操作时，您将重置状态（返回初始状态）：

  switch (action.type) {
    ...
    default:
      return initialState;
  }

这就是isSignedIn在重定向后变为空的原因。因为当有一个未处理的动作时，它将重置状态。 （我查看了您的仓库，有一个名为FETCH_COUNTS的操作未得到处理。）

因此将其更改为：

export default (state = initialState, action) => {
  switch (action.type) {
    case SIGNED_IN:
      return { ...state, isSignedIn: true, userInfo: action.payload }; //important parts!
    case SIGNED_OUT:
      return { ...state, isSignedIn: false, userId: null };
    default:
      console.error('action is not handled!', action)
      return state; // <----- just return previous state when the actiontype is not recognized
  }
  return state
};

以便在您执行未处理的操作时不会重置状态。