React Router v6移除useHistory后useNavigate适配自定义History相关问题咨询

1. 能否通过useNavigate获取自定义CustomHistory实例 #

不能。React Router v6的useNavigate仅返回导航操作函数，设计上没有暴露底层history实例的能力。
解决方案有两种：

• 直接导出你创建的CustomHistory单例：你在初始化路由、传入自定义history的位置，直接将创建好的customHistory实例作为模块导出，组件内直接引入该实例即可使用，无需通过路由Hook获取。
  示例代码：

  // history.ts 初始化自定义history的文件
  export const customHistory = new CustomHistory()
  
  // 组件内使用
  import { customHistory } from './history'
  

• 封装Context注入：如果你的history实例不是全局单例，可以通过React Context将其注入到路由树中，再自定义Hook获取实例：

  // 自定义Context
  const CustomHistoryContext = createContext<CustomHistory | null>(null)
  
  // 根组件注册
  <CustomHistoryContext.Provider value={customHistory}>
    <Router history={customHistory}>
      {/* 路由内容 */}
    </Router>
  </CustomHistoryContext.Provider>
  
  // 自定义Hook获取
  export const useCustomHistory = () => useContext(CustomHistoryContext)!
  

2. canGo方法的替代方案 #

你不需要依赖React Router的内置API实现该能力：

• 如果你采用上述方案直接获取了自己实现的CustomHistory实例，原本的canGo(x)方法可以直接调用，逻辑和之前完全一致，也符合你自定义的「特定路由不记入历史栈」的规则，是最适配你场景的方案。
• 如果你使用React Router默认的history实例，也可以在初始化路由时保存createBrowserHistory返回的实例，直接调用实例自带的canGo(x)方法即可，该方法是history库的原生能力，React Router v6并没有移除该API，只是没有通过内置Hook暴露而已。

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