React router с Typescript (функциональный класс)
Я пробую Typescript с реакцией (раньше никогда не работал). Я решил проблему, но я не уверен, что это правильный способ сделать это.
Итак, мой маршрут в реакции выглядит так
<Route exact path='/show/:id' component = {ShowIssues} />
И мой решенный компонент выглядит так
import React from "react";
import { RouteProps } from "react-router-dom";
interface RouteInfo extends RouteProps {
params: {
id: string;
};
}
const ShowIssues = ({ match }: { match: RouteInfo }) => {
const { params }: { params: { id: string } } = match;
const { id }: { id: string } = params;
return <div>time to show the issue {id}</div>;
};
export default ShowIssues;
Правильно ли решен в реквизите этот матч? Удивительно, но я почти ничего не нашел о функциональных компонентах (и грядут хуки, так что, думаю, имеет смысл поднять это сомнение).
Другое мое сомнение касается const { params }: { params: { id: string } } = match;, есть ли способ повторно использовать RouteInfo, чтобы мне не приходилось вводить его дважды?
Спасибо!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Типы const { params }: { params: { id: string } } и const { id }: { id: string } избыточны, потому что они будут выведены, если match был введен правильно.
Реквизиты маршрута — это объект определенного типа со свойством match, RouteComponentProps. Он принимает тип match.params в качестве общего параметра.
Должен быть:
interface RouteInfo extends RouteProps {
id: string;
}
const ShowIssues = ({ match }: RouteComponentProps<RouteInfo>) => {
const { params } = match;
const { id } = params;
return <div>time to show the issue {id}</div>;
};
Рад, что это помогло.
Просто чтобы еще раз проверить и убедиться, что все в порядке: RouteComponentProps уже указывает на params, поэтому мне просто нужно указать id: string в моем типе? с оберткой params не получалось и без нее выглядит хорошо
Это правильно. См. github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/…, как это работает. Я обновил ответ для ясности.
Разве свойства RouteProps не для <Route />? Расширение их здесь кажется излишним и на самом деле вызвало у меня странные ошибки TS. Это работает достаточно хорошо: interface RouteInfo { ... .
Идеально, это именно то, что я искал. Я тоже не видел его должным образом, чтобы печатать его каждый раз.