React Router 6搭配TypeScript时子路由组件未通过props传递的原因是什么？

解决方案 #

React Router 6 嵌套路由的渲染规则和TS/JS环境无关，你需要在父路由对应的布局组件中使用官方提供的<Outlet />组件承接子路由内容，而非自定义children属性。React Router 不会自动将嵌套子路由内容注入到普通组件的children属性中，只有Outlet会渲染匹配到的子路由组件。

具体修改步骤：

1. 从react-router-dom中导入Outlet组件
2. 替换AppFrame组件内的{children}占位为<Outlet />，原自定义的children类型属性可直接删除

修改后的AppFrame组件代码如下：

import React from 'react';
import { Outlet } from 'react-router-dom';

const AppFrame = ()  => {
  return (
    <div>
      AppFrame
      <Outlet />
    </div>
  )
};

export default AppFrame;

修改完成后保持现有路由配置不变，访问/product路径时，ProductView组件就会正常渲染到AppFrame内的Outlet对应位置。

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