javascript - 在react-router-dom中如何像react-navigation一样获得 `previous`？

Question

我正在使用react-navigation 5 和 react-router-dom ,

我们使用previous来定义是否应该定义后退按钮。我们希望在 react-router 中有等价的东西。

function App() {
    const { previous, goBack, toggleDrawer } = useNavigation();
    return (
      <div>
        {previous ? (
          <Button
            onPress={goBack}
          />
        ) : (
          <Button
            icon="menu"
            onPress={toggleDrawer}
            accessibilityLabel="toggle drawer menu"
          />
        )}
      </div>
    );
}

如何在 react-router-dom 中获得 previous ，如 react-navigation 中那样？ (如 const { previous } = useNavigation();

Answer 1

我创建了一个历史记录缩减器来跟踪最后 N 个历史记录条目。此实现是一个“堆栈”，“顶部”始终位于索引 0，“顶部”是当前位置，即您刚刚推送的路线，因此索引 1 将是之前的位置。

import { LOCATION_CHANGE } from 'connected-react-router';

const HISTORY_LENGTH = 10;

const initialState = [];

const locationReducer = (state = initialState, action) => {
  const { type } = action;

  switch (type) {
    case LOCATION_CHANGE: {
      const { payload } = action;
      if (
        state.length &&
        state[0].location.pathname === payload.location.pathname
      ) {
        // if pushing same route, return old state
        return state;
      }

      switch (payload.action) {
        case 'REPLACE':
          // if replacing current entry, don't "push" on new route, replace "top"
          return [payload, ...state.slice(1)];

        // handle other action cases to maintain your stack

        default: // PUSH
          // ensure only last HISTORY_LENGTH entries kept
          return [payload, ...state].slice(0, HISTORY_LENGTH);
      }
    }

    default:
      return state;
  }
};

export default locationReducer;

LOCATION_CHANGE 是 action由 connected-react-router 定义，当您的历史记录收到位置更改时调度。

每个有效负载具有以下形状:

{
  location,
  action,
  isFirstRendering,
}

如果您希望有选择地呈现“后退”按钮，那么您可以检查堆栈，如果有超过 1 个条目，您可以断言存在要返回的页面。