StaticRouter context正确类型 服务端渲染出现TypeScript类型错误如何解决

这个报错是React Router大版本升级导致的属性变更：

React Router v5及更早版本的StaticRouter支持传入context属性，但是v6版本正式移除了该属性，替换为staticContext，对应类型定义同步更新，因此TypeScript检测到不存在的context属性时抛出ts(2322)错误。

• v5及更早版本：context属性的正确类型为RouterContext，可从@types/react-router-dom导入
• v6及更高版本：无context属性，替代的staticContext属性的正确类型为StaticRouterContext，可从react-router-dom/server导入

方案1：适配v6版本（推荐） #

1. 调整属性名和类型导入

// 从react-router-dom/server导入对应组件和类型
import { StaticRouter, StaticRouterContext } from 'react-router-dom/server';

// 声明符合类型约束的上下文对象
const context: StaticRouterContext = {};

// 渲染时把context属性改为staticContext
<StaticRouter staticContext={context} location={req.url}>
  <App />
</StaticRouter>

2. 配套修改路由组件内的上下文读写逻辑：v6不再支持从组件props里获取上下文，统一使用useStaticContext()钩子读写上下文内容。

方案2：保持v5版本 #

如果项目暂时不打算升级到v6，检查确认package.json中react-router-dom版本为5.x，同时安装匹配的类型包：

npm i @types/react-router-dom@5

此时原来的context属性无需修改，TypeScript类型校验即可正常通过。

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