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

您正在将redirects与default routes混合。

重定向用于重写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>

使用TypeScript到达路由器

1 个答案: