React V6迁移：替代已弃用withRouter及useNavigate正确用法

你的核心问题是原来通过withRouter注入的history对象，在V6里需要用useNavigate Hook获取的navigate函数替代，而原来的addBoard action依赖history做跳转。下面给你两种清晰的修改方案：

方案一：组件内处理跳转（推荐，分离数据与路由逻辑） #

让redux action只负责数据操作，路由跳转逻辑留在组件中，职责更清晰：

1. 调整addBoard action，使其在完成数据操作后返回结果（比如Promise）
2. 在组件的onSubmit中，等待action执行完成后调用navigate跳转

修改后的组件代码：

const CreateBoard = () => { // 无需接收props
  const classes = useStyles();
  const [open, setOpen] = useState(false);
  const [title, setTitle] = useState('');
  const dispatch = useDispatch();
  const navigate = useNavigate();
  
  const onSubmit = async (e) => {
    e.preventDefault();
    // 等待创建board的action执行完成
    await dispatch(addBoard({ title }));
    // 操作完成后跳转目标页面，示例为列表页
    navigate('/boards');
    // 若需返回上一页，可使用 navigate(-1)
  };

  // 其他组件逻辑...
};

// V6中无需withRouter，直接导出组件
export default CreateBoard;

方案二：将navigate函数传入action #

如果不想改变原有action的职责，也可以直接把navigate传给action，在内部完成跳转：

修改后的组件代码：

const CreateBoard = () => {
  const classes = useStyles();
  const [open, setOpen] = useState(false);
  const [title, setTitle] = useState('');
  const dispatch = useDispatch();
  const navigate = useNavigate();
  
  const onSubmit = async (e) => {
    e.preventDefault();
    // 将navigate传递给addBoard action
    dispatch(addBoard({ title }, navigate));
  };

  // 其他组件逻辑...
};

export default CreateBoard;

对应调整addBoard action（假设是redux-thunk类型）：

export const addBoard = (boardData, navigate) => async (dispatch) => {
  try {
    // 原有创建board的业务逻辑，比如调用API
    await api.createBoard(boardData);
    dispatch({ type: 'ADD_BOARD_SUCCESS', payload: boardData });
    // 用navigate替代原来的history.push
    navigate('/boards');
  } catch (error) {
    dispatch({ type: 'ADD_BOARD_FAILURE', payload: error.message });
  }
};

关键注意事项 #

• V6中函数组件无需withRouter，直接使用useNavigate等路由Hooks即可
• navigate函数常用用法：
  • 跳转到指定路径：navigate('/target-path')
  • 返回上一页：navigate(-1)
  • 替换当前页面（不保留历史记录）：navigate('/target-path', { replace: true })

内容的提问来源于stack exchange，提问作者User