如何在TypeScript中从Link的state访问props.location并做类型标注？

核心问题梳理 #

• 跨页面通过Link的state传参时，不知道如何做TypeScript类型标注
• PageTwo组件无法正确获取传递的state
• Router组件中出现类型错误：类型'{}'缺少props类型中的相关属性

1. 规范PageOne组件的类型标注（可选但更清晰） #

先给要传递的state定义明确类型，让代码可读性更强：

import { Link } from "react-router-dom"
import { useState } from "react"

// 定义传递给PageTwo的state类型
type PageTwoState = boolean

export const PageOne = () => {
  // 显式指定useState的类型
  const [example, setExample] = useState<PageTwoState>(true)

  return (
    <Link to="/pageTwo" state={example}>
       <button> Go to pageTwo </button>
    </Link>
  )
}

2. 修复PageTwo组件的state获取与类型标注 #

React Router v6里，组件不再通过props接收路由信息，要改用useLocation钩子。同时给location.state指定类型：

import { useLocation } from "react-router-dom"

// 复用之前定义的state类型
type PageTwoState = boolean

// PageTwo不需要接收props，直接定义为无参函数组件
export const PageTwo = () => {
  // 给useLocation传入泛型，指定state的类型
  const location = useLocation<PageTwoState>()
  const state = location.state

  return (
    <>
      {state && <div>Test</div>}
    </>
  )
}

3. 解决Router组件的类型错误 #

之前的错误根源是组件名称用了小写（pageOne、pageTwo），React要求组件名称必须大写开头，否则会被识别为普通HTML标签，导致类型推断异常。修正后：

import { PageOne } from "./PageOne"
import { PageTwo } from "./PageTwo"
import { BrowserRouter as Router, Routes, Route } from "react-router-dom"

export const App = () => {
  return (
    <div className={styles.app}>
      <Router>
        <Routes>
          <Route path="/" element={<PageOne />} />
          <Route path="/pageTwo" element={<PageTwo />} />
        </Routes>
      </Router>
    </div>
  );
}

关键知识点总结 #

• React组件名称必须大写开头，否则会被当作原生DOM元素处理，引发类型错误
• React Router v6中，路由信息（location、params等）通过useLocation、useParams等钩子获取，而非props传递
• 给useLocation<T>传入泛型参数，就能给传递的state加上完整的类型校验与提示
• 传递的state可以是任意类型（对象、基本类型等），只需对应定义TypeScript类型即可

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