Реактивная маршрутизация с динамическим маршрутом Невозможно найти this.props.match.params

Question

У меня есть React BrowserRouter, в котором у меня есть три маршрута, показанных ниже:

<BrowserRouter>
            <Switch>
                <Route exact
                       path="/"
                       component={(routeProps: object) => (
                           <Component1 toggle="Previous" {...routeProps} />
                       )}
                />
                <Route path="/active"
                       component={(routeProps: object) => (
                           <Component1 toggle="Active" {...routeProps} />
                       )}
                />
                <Route path="/items/:id"
                       render={(props) => <Component2 {...props}/>}
                />
            </Switch>
</BrowserRouter>

Я пытаюсь передать идентификатор в Component2, как показано, чтобы получить элемент по идентификатору с помощью getвызов API.Мой Компонент2 показан ниже:

export default class Component2 extends React.Component<Props & RouteComponentProps, State> {

    public constructor(props: Props & RouteComponentProps) {
        super(props);
        this.state = {
            item: {
                //Item initialization
            }
        };
    }

    public async componentWillMount() {
        let job = await ItemService.fetch(this.props.match.params);
        this.setState({item: item});
    };


    public render() {
        let {item} = this.state;
        return (
            <div className="item-details">
                <Component3 item={item}/>
            </div>

        )
    }
}

Однако я получаю сообщение об ошибке в строке, содержащей this.props.match.params.id.

• Первая ошибка - если я не включаю RouteComponentProps, в this.props.match.params говорится: Property match does not exist on type <Readonly<Props> & Readonly<ReactNode>
  • Есть еще одна публикация переполнения стека, которая привела к мысли, что вам нужны RouteComponentProps в ReactComponent для поиска реквизита, но не имеет объяснения, почему.
• Если я добавлю RouteComponentProps, я исправлю первую ошибку, но все еще не могу получить идентификатор из параметров.Я получаю ошибку: property id does not exist on type {}

После поиска вопросов по SO и многих примеров реакции маршрутизации я застрял.Моя конечная цель состоит в том, чтобы иметь компонент (Component2), который будет:

1. быть перенаправлен в тот момент, когда URL соответствует items/:id (то есть /items/3)
2. Передать идентификатор 3в этот Компонент и вызовите Бэкэнд для получения элемента
3. Сохраните элемент из внутреннего вызова в состояние (локальное состояние Компонента2)
4. Передайте этот элемент из состояния в дочерние компоненты

Мне также любопытно, в чем разница:

• React.Component
• React.Component<Props>
• React.Component<Props, State>
• React.Component<Props & RouteComponentProps, State>

, поскольку моя ссылка на компонент в <Route приводит к ошибкам, когда я переключаю объявление компонента с помощью React.Components выше.

Answer 1

RouteComponentProps имеет необязательный универсальный параметр (по умолчанию {}) для указания ожидаемых параметров.Объявления типов:

export interface RouteComponentProps<Params extends { [K in keyof Params]?: string } = {}, C extends StaticContext = StaticContext, S = H.LocationState> {
  history: H.History;
  location: H.Location<S>;
  match: match<Params>;
  staticContext?: C;
}

export interface match<Params extends { [K in keyof Params]?: string } = {}> {
  params: Params;
  isExact: boolean;
  path: string;
  url: string;
}

Так что, если вы объявляете использование как RouteComponentProps<{ id: string}>, оно должно печататься правильно.

Редактировать:

Я тожеЛюбопытно, в чем разница:

Для большинства этих опций просто, если вы не укажете универсальный тип, предполагается тип {}.Так что React.Component эквивалентно React.Component<{}, {}>, и реквизиты и состояние будут вводиться как пустой объект.

Если у вас есть <Props & RouteComponentProps>, это тип пересечения , что означаетКомпонентные реквизиты будут объединены вместе Props и RouteComponentProps.