В типе '{}' отсутствуют следующие свойства из типа 'match <Identifiable>': params, isExact, path, url.

Question

Я использую реагирующий маршрутизатор и машинописный текст, чтобы получить переменную идентификатора из маршрута для использования в компоненте, и машинописный текст жалуется, что: введите 'match': params, isExact, path, url

Вот мой код (App.tsx):

<Route path='/posts/:id'>
  <Post />
</Route>

Post.tsx:

import React from 'react';
import { match } from 'react-router';

interface Identifiable {
  id: string
  params: string,
  isExact: string,
  path: string,
  url: string,
}

const Post = (mathedRoute: match<Identifiable>) => {
  return <h1>{mathedRoute.params.id}</h1>
}

export default Post;

Заранее благодарим за помощь.

Answer 1

Чтобы извлечь совпадение, вам необходимо визуализировать компонент, а не передавать его как дочерний.

<Route path='/posts/:id' render={({match}) => <Post match={match} />} />

Типографский скрипт может по-прежнему жаловаться на него, и в этом случае вам нужно будет импортировать RouteComponentProps из "response-router-dom" и, возможно, его расширение.

Однако! Хорошая новость в том, что реагирующий маршрутизатор хуки существуют!

Я бы посоветовал поиграть с ними, особенно с хуками useRouteMatch и useParams.

Answer 2

Вы можете использовать стандартный способ:

import React from 'react';
import { Route, RouteComponentProps, Switch } from 'react-router-dom';

interface PostParams {
    id: string;
}

function Post(props: RouteComponentProps<PostParams>) {
    return <>{props.match.params.id}</>;
}

export function App() {
    return (
        <Switch>
            <Route path='/posts/:id' component={Post}/>
        </Switch>
    );
}

или способ перехвата:

import React from 'react';
import { Route, Switch, useParams } from 'react-router-dom';

interface PostParams {
    id: string;
}

function Post() {
    const { id } = useParams<PostParams>();
    return <>{id}</>;
}

export function App() {
    return (
        <Switch>
            <Route path='/posts/:id'>
                <Post/>
            </Route>
        </Switch>
    );
}

В вашем коде вы пытаетесь смешать их вместе. reed подробнее о реактивном маршрутизаторе v5