1

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

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 还是很陌生，所以我不确定这在实践中究竟是如何工作的。

4

1 回答 1

1

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

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

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

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

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

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

interface Props {
  default: boolean
}

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

并像这样使用它：

<Router>
  ...
  <PageNotFound default={true} />
</Router>
于 2019-05-07T22:58:00.370 回答