React Router 6 和 Typescript - 为什么它不通过 props 传递组件？

Question

在 react router 6 中，在 javascript 中，这是可行的：

<BrowserRouter>
  <Routes>
    <Route path="/" element={<AppFrame />}>
      <Route path="product" element={<ProductView />} />
    </Route>

    <Route path="*" element={<div>Nothing here</div>} />
  </Routes>
</BrowserRouter>

它在我有 {children} 的 AppFrame 内显示 ProductView。

---

我试图在 Typescript 和 React Router 6 中做同样的事情，但它根本不起作用——它只是显示 AppFrame。我需要做更多的事情来添加 {children} 标记吗？

我的页面布局组件：

import React from 'react';

type Props = {
    children?: React.ReactNode
  };

  
const AppFrame = ({ children }: Props)  => {
  return (
    <div>
      AppFrame
        {children}
    </div>
  )
};

export default AppFrame;

我的演示组件：

import React from 'react';
import AppFrame from '../../Components/Layout/AppFrame';



const ProductView = ()  => {
  return (

    <div>
    Product View
    </div>
  )
};

export default ProductView;

我的路线：

<BrowserRouter>
  <Routes>
    <Route path="/" element={<AppFrame />}>
      <Route path="product" element={<ProductView />} />
    </Route>

    <Route path="*" element={<div>Nothing here</div>} />
  </Routes>
</BrowserRouter>

Answer 1

React Router 6 需要使用新的 Outlet 组件，而不是通过 {Children}。

import React from 'react';

type Props = {
    children?: React.ReactNode
  };

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

export default AppFrame;

Answer 2

因为语法改变。请看https://github.com/remix-run/react-router/blob/f59ee5488bc343cf3c957b7e0cc395ef5eb572d2/docs/advanced-guides/migrating-5-to-6.md#relative-routes-and-links

// Ah, this is nice and simple!
<Route path=":userId" component={Profile} />

// But wait, how do I pass custom props to the <Profile> element??
// Hmm, maybe we can use a render prop in those situations?
<Route
  path=":userId"
  render={routeProps => (
    <Profile routeProps={routeProps} animate={true} />
  )}
/>