如何设置useLocation的state类型？

Question

题目描述

在使用react-router v6 版本的hook的时候，使用到了useLocation，想获取路由中的state，但是不知道怎么样限制state的类型

const history = useLocation();
const state: string = history.state as FriendData; 
//不能将类型“unknown”分配给类型“string”。

我查找到很多的答案都是使用
const history = useLocation<string>();
但是不知道是不是我使用的是v6版本的原因，useLocation不是泛型

请问有什么方法可以设置state的类型吗？（我现在是使用as硬生生将其判断成了我要的类型，但是感觉应该会有更优雅的方法）提前谢谢各位大佬 ^_^/

Answer 1

v6的版本吧useLocation的泛型去掉了, 所以没法这样用了

可以看看这个issue

看他的建议就是用as来断言了

(就是好丑,

---

自己造一个

function useMyLocation<T>() {
  return useLocation() as Location & { state: T }
}

function App(){
  const location = useMyLocation<{ name: string }>()
  // string
  location.state.name
}

Answer 2

你可以用接口去描述这个类型啊：

interface LocationState {
  historyState: string;
}

const history = useLocation<LocationState>();
const state = history.state