Достигните маршрутизатора с TypeScript

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 говорит, что он недействителен в Redirect, есть ли способ в 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Компонент должен иметь логическое свойство по умолчанию в своих свойствах, например:

interface Props {
  default: boolean
}

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

И использовать его следующим образом:

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