使用 react-router-dom 后，url 发生了变化，但页面没有重新渲染

Question

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

每当我使用 history.push() 或 Link to='' 时，目标网站都不会呈现，但刷新后，一切似乎又正常了！

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

如你所见，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
};

这样当您有未处理的操作时它不会重置状态。