单击nextjs中动态路由页面中的任何按钮时重定向到主页

Question

我正在尝试将redux saga与nextjs集成。为此，我做了一个简单的计数器来检查它。在/test这样的常规路由页面中一切都很好，但是，当我在动态路由页面中使用它时，这会产生问题，例如：/test/1

在重新加载后我第一次单击Add/Minus按钮时，它会将我重定向到首页/，而没有更改计数器状态。

这是我动作的代码：

export function setAddCount(val) {
  return {
    type: ADD,
    val,
  };
}
export function setMinusCount(val) {
  return {
    type: MINUS,
    val,
  };

这是我的减速器代码：

import produce from 'immer';
import { ADD, MINUS, SELECTED_USER_TAB } from './constants';

export const initialState = {
  tabId: '1',
  countNo: 0,
};

/* eslint-disable default-case, no-param-reassign */
const courseReducer = (state = initialState, action) =>
  produce(state, (draft) => {
    switch (action.type) {
      case SELECTED_USER_TAB:
        console.log(action.tabId);
        break;
      case ADD:
        draft.countNo = draft.countNo + action.val;
        break;
      case MINUS:
        draft.countNo = draft.countNo - action.val;
        break;
    }
  });

export default courseReducer;

这是组件的代码：

const TestTab = ({ handleAdd, handleMinus, countNo }) => {
  useInjectReducer({ key: 'course', reducer });
  return (
    <div>
      <h1>{countNo}</h1>
      <button onClick={() => handleAdd(5)}>Add</button>
      <button onClick={() => handleMinus(5)}>Minus</button>
    </div>
  );
};

const mapStateToProps = createStructuredSelector({
  countNo: makeSelectCountNo(),
});

function mapDispatchToProps(dispatch) {
  return {
    handleAdd: (val) => dispatch(setAddCount(val)),
    handleMinus: (val) => dispatch(setMinusCount(val)),
  };
}

const withConnect = connect(mapStateToProps, mapDispatchToProps);

export default compose(withConnect)(TestTab);

如何解决此问题？ TIA ...