使用打字稿到达路由器

Question

我有一些代码看起来像这样

import React from 'react';
import { Router, Redirect } from '@reach/router';
import Posts from './screens/Posts';
function App() {
  return (
    <Router>
      <Posts path="posts" />
      <Redirect from="/" to="posts" noThrow default />
    </Router>
  );
}

default道具说它在重定向上无效，有没有办法在 React 中键入组件的子级？

看起来可能有一种方法可以使用这样的东西来做到这一点：https://www.typescriptlang.org/docs/handbook/jsx.html#children-type-checking

但我对 TypeScript 仍然很陌生，所以我不确定它在实践中是如何工作的。

Answer 1

您正在混合重定向和默认路由。

重定向用于重写 URL。在您的示例中，您似乎喜欢将用户从"/"重定向到"/posts"，因此在这种情况下，使用重定向是正确的。

默认路由用于在用户提供未知路径时显示组件。

因此，您可能会创建一个PageNotFound组件并像这样使用它：

<Router>
  <Redirect from="/" to="posts" noThrow />
  <Posts path="posts" />
  <PageNotFound default />
</Router>

由于您使用的是 Typescript，因此您的 PageNotFound 组件必须在其 props 中具有布尔默认属性，如下所示：

interface Props {
  default: boolean
}
const PageNotFound = (props: Props) => {
  return <div>Page not found</div>;
}

并像这样使用它：

<Router>
  ...
  <PageNotFound default={true} />
</Router>