react typescript 页面跳转state传参获取值

随着时间推移ts逐渐成为主流，以前jsx很多骚操作会受到类型检测的限制，虽然能正常运行，但是编辑器会提示各种错误。
比如这次要讲的react下页面跳转时利用state传参的功能

发起跳转

<Link
  to={{ pathname: '/login', state: { userName: "xxoo" } }}
/>

接收参数

jsx写法

该写法在ts中其实也能获取到值。

const userName=props.location.state.userName;

注意：如果你用这种方式在ts里写是会提示类型错误的

tsx写法

关键代码是利用useLocation类型钩子获取state

//声明state类型
interface stateType {
   userName: string;
}
//使用钩子获取state
const { state } = useLocation<stateType>();

console.log(state.userName)

此时查看控制台会看到输出的xxoo