Подключенный React Router и TypeScript для `match`

Question

Подключенный React Router экспортирует типы для RouterState, и это здорово! Однако я не вижу наборов для match. Предполагается, что они также могут быть импортированы и добавлены в редуктор, например, RouterState используется ниже и в редукторе:

https://github.com/supasate/connected-react-router/blob/master/examples/typescript/src/reducers/index.ts#L13

const rootReducer = (history: History) => combineReducers({
  count: counterReducer,
  router: connectRouter(history)

})

export interface State {
  count: number
  router: RouterState
}

Без которого вы не можете использовать this.props.match в подключенных компонентах и ​​т. Д. Для сопоставления параметров и т. Д. Есть ли обходной путь для тех, кто использует TypeScript, которых также необходимо добавить к редуктору? Или мне здесь не хватает ключевой части? Большое спасибо!

Answer 1

У вас есть 2 способа сделать это.

1. Вы можете использовать функцию createMatchSelector внутри mapStateToProps, чтобы извлечь match из вашего состояния. ДЕМО

import * as React from "react";
import { connect } from "react-redux";
import { createMatchSelector } from "connected-react-router";
import { match } from "react-router";
import { State } from "./reducers";

interface StateProps {
  match: match<{ name?: string }>;
}

const Hello = (props: StateProps) => (
  <div>Hello {props.match.params.name}!</div>
);

const mapStateToProps = (state: State) => {
  const matchSelector = createMatchSelector("/hello/:name");
  return {
    match: matchSelector(state)
  };
};

export default connect<StateProps>(
  mapStateToProps,
  null
)(Hello);

Вы можете получить match напрямую с роутера, а не из штата. ДЕМО

import * as React from "react";
import { RouteComponentProps, withRouter } from "react-router";

const Hello = (props: RouteComponentProps<{ name?: string }>) => (
  <div>Hello {props.match.params.name}!</div>
);

export default withRouter(Hello);