React Router - 버전 업데이트 후 Router에서 스크립트 오류를 입력합니다.

React Router - 버전 업데이트 후 Router에서 스크립트 오류를 입력합니다.

방금 리액트 앱을 업그레이드하려고 했는데

react-displays - 4.0.19 ~4.0.20

반응 - 16.0.30 ~16.0.34

typescript - version "2.7.0-120180108"

내 앱에서는 'withRouter'를 사용하는 곳마다 암호 타입 오류가 발생합니다.모든 인터페이스 소품을 'any'로 교체하여 작동하도록 했습니다.

import * as React from 'react';
import { Switch, Route, withRouter} from 'react-router-dom';
import { Login } from './Login';
import { connect } from 'react-redux';
import { RootAction, RootState } from './_redux';

class MainForm extends React.Component<any> {

  constructor(props: any) {
    super(props);
  }

  render() {

    return (
      <Switch>
        <Route exact={true} path="/" component={Login}/>
        <Route  path="/accounts" component={AccountsView}/>
      </Switch> 
    );
  }
}

const mapStateToProps = (state: RootState) => ({
  state
});

export const Main = withRouter(connect(mapStateToProps)(MainForm);

오류 TS2345: 유형 'ComponentClass> 및 {WrapedComponent: Component}의 인수유형; }'을(를) '구성 요소' 유형의 매개 변수에 할당할 수 없습니다.Type >.' 'Component Class > & { Wraped Component : Component 」라고 입력합니다.유형; }'은 유형 'Stateless Component>'에 할당할 수 없습니다.Component Class > 및 {Wraped Component: 컴포넌트를 입력합니다.유형; }'은(props:Route Component Props & { children :React Node, }, 컨텍스트?: any): ReactElement | null' 입니다.

마지막 행을 이 행으로 변환하는 경우:

export const Main = connect(mapStateToProps)(MainForm);

난 실수 안 해 여긴 정말 짜증나감사해요.

편집, 나는 로 바꿨다.

export const Main = connect(mapStateToProps)(withRouter(MainForm));

Mayank Shukla의 제안과 같습니다. 하지만 이제 오류가 발생합니다.

오류 TS2345: 유형 'ComponentClass>'의 인수를 유형 'Component'의 매개 변수에 할당할 수 없습니다.유형 <{ 상태:RootState; } & DispatchProp >' 입니다.'ComponentClass>' 유형은 'StatelessComponent' 유형에 할당할 수 없습니다.< { state :RootState; } & DispatchProp >' 입니다.'ComponentClass>'를 입력하면 시그니처 '(props: { state:Root State; } & Dispatch Prop & { children :React Node, }, 컨텍스트?: any): ReactElement | null' 입니다.

방금 TypeScript 2.6으로 업그레이드 했는데 같은 문제가 발생했어요.

이 문제를 해결하기 위해RouteComponentProps.

의 는, 「 」http://localhost:8080/your-component/abc ®

<Route component={YourComponent} path="/your-component/:param1?" />

컴포넌트는 다음과 같습니다.

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

// Type whatever you expect in 'this.props.match.params.*'
type PathParamsType = {
    param1: string,
}

// Your component own properties
type PropsType = RouteComponentProps<PathParamsType> & {
    someString: string,
}

class YourComponent extends React.Component<PropsType> {
    render() {

        console.log(this.props); // Prints all props including routing-related
        console.log(this.props.match.params.param1); // Prints 'abc'
        console.log(typeof this.props.match.params.param1 === 'string'); // prints 'true'

        return <div>...</div>;
    }
}

export default withRouter(YourComponent);

다음과 같이 해결해야 합니다.

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

interface IProps extends RouteComponentProps<any> {
  title: string;
}

class MyComp extends React.Component<IProps> {
    public render(){
        return (
           <h1>{this.props.title}</h1>
        )
    }
}

export default withRouter<IProps>(MyComp);

다음은 기능적 반응 접근법입니다.

import { RouteComponentProps } from "react-router";

interface Props extends RouteComponentProps {
    thing: Thing | false;
    onAction?: () => void;
}

export default withRouter(({ thing, onAction, history }: Props) => {

입력된 React 컴포넌트를 보통 다음과 같이 잘라냅니다.

// These props are provided when creating the component
interface OwnProps {
    // ...
}

// These props are provided via connecting the component to the store
interface StateProps {
    // ...
}

// These props are provided by the router
interface PathProps {
    // ...
}

class Component extends React.Component<OwnProps & StateProps & RouteComponentProps<PathProps>> {
    // ...
}

const mapStateToProps = (state: State, props: OwnProps): StateProps => ({
    // ...
});

export default withRouter(
    connect(mapStateToProps)(Component)
);

또 다른 솔루션, 데코레이터 사용

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

// inform we match url /:id
interface IMatchParams {
    id: string;
}

// Note we use Partial<RouteComponentProps> to make all RouteComponentProps as optional for high order component
interface IComponentProps extends Partial<RouteComponentProps<IMatchParams>> {
    myPersonalProp: string;
}

@withRouter
export default class MyClass extends React.Component<IComponentProps>{

    public componentDidMount(){
        console.log(this.props.match.params.id);
    }
}

Type Script 응용 프로그램의 동작 구문 변형은 다음과 같습니다.

    import * as React from 'react';
    import { connect } from 'react-redux';
    import { withRouter } from 'react-router-dom';

    interface ComponentProps {
    // Your properties here
    }

    interface ComponentState {
    // Your properties here
    }

    interface MapStateToPropsTypes {
    // Your properties here
    }

    interface MapDispatchToPropsTypes {
    // Your properties here
    }

    class MyComponentName extends React.Component<ComponentProps, ComponentState> {
        constructor(props: ComponentProps) {
            super(props);
        }
    }

    export default withRouter(
    connect<MapStateToPropsTypes, MapDispatchToPropsTypes>(
        mapStateToProps,
        mapDispatchToProps
      )(MyComponentName) as any
    );

를 컴포넌트에 수를 '컴포넌트'에 .withRouter.

외에 '있다'도 있어요.withRouter / Component (기능컴포넌트 / 컴포넌트기능 컴포넌트/컴포넌트).

, 「 」, 「 」라고 하는 도 주의해 주세요.withRouterstaticContext소품이랑 같이.이것은 랩된 컴포넌트에 전달하기 전에 소품 세트에서 제거해야 합니다.그렇지 않으면 이 오류가 발생합니다(컴포넌트를 받아들이기 위해 특별히 인터페이스하지 않는 한).staticContext).

index.js:1 Warning: React does not recognize the 'staticContext' prop on a DOM element...

기능 컴포넌트의 경우 다음 예에서 다음을 올바르게 입력하는 방법을 보여 줍니다.withRouter래퍼:

클래스 컴포넌트의 경우 다음 예에서 적절한 입력 방법을 보여 줍니다.withRouter랩퍼

import React, { FunctionComponent } from 'react';
import { RouteComponentProps, withRouter } from 'react-router-dom';

interface MyCompProps extends RouteComponentProps<any> {
  title: string;
}

const MyComp: FunctionComponent<MyCompProps> = ({ title }) => (
    <h1>{ title }</h1>
);

export default withRouter<MyCompProps, Component<MyCompProps>>(({ staticContext, ...props }) => MyComp(props));

클래스 컴포넌트의 경우 다음 예에서 적절한 입력 방법을 보여 줍니다.withRouter랩퍼

import React, { Component } from 'react';
import { RouteComponentProps, withRouter } from 'react-router-dom';

interface MyCompProps extends RouteComponentProps<any> {
  title: string;
}

class MyComp extends Component<MyCompProps> {
    public render(){
        return (
           <h1>{this.props.title}</h1>
        )
    }
}

export default withRouter<MyCompProps, Component<MyCompProps>>(({ staticContext, ...props }) => MyComp(props));

저는 Typescript 3.6과 매우 유사한/같은 문제로 어려움을 겪고 있었습니다.온라인에서 해결책을 찾을 수 없었기 때문에 여기서 저만의 솔루션을 공유하겠습니다.좀 더 복잡한 앱으로 작업하는 사람에게 도움이 되었으면 합니다.

import React, { memo } from 'react';
import { withRouter, RouteComponentProps } from 'react-router-dom';
import { ThunkDispatch } from 'redux-thunk';
import { connect } from 'react-redux';
import { AnyAction } from 'redux';

interface IStateProps {
  name: string;
  sessionLanguage: string;
}

interface IDispatchProps {
  handleLogout: () => void;
}

type Props = IStateProps & IDispatchProps & RouteComponentProps<any>;

const MyCoolComponent = ({
  sessionLanguage,
  handleLogout,
  history,
}: Props) => {
  return null;
};

const mapStateToProps = (state: IAppState): IStateProps => ({
  name: state.getIn(['session', 'name']),
  sessionLanguage: state.getIn(['session', 'language']),
});

const mapDispatchToProps = (
  dispatch: ThunkDispatch<{}, {}, AnyAction>
): IDispatchProps => ({
  handleLogout: async () => {
    await dispatch(logout());
  },
});

export default withRouter(
  connect<IStateProps, IDispatchProps, {}, IAppState>(
    mapStateToProps,
    mapDispatchToProps
  )(memo(NavigationLayout))
);

주의사항:

• 중요한 부분은 인터페이스, Route Component Props, type Props, React 컴포넌트 타이핑 및 내보내기 기본값 with Router(...)입니다.mapStateToProps 및 mapDispatchToProps는 단순한 예입니다.
• IAppState는 내 앱의 리덕스 스토어의 타이핑을 정의합니다.없으면.
• 여기서 불변의 redux 스토어를 사용하고 있습니다(그래서 state.getIn...).

이 문제에 가장 가까운 답은 이 스레드였습니다.다만, 저는 제안을 아래와 같이 약간 변경해야 했습니다.혹시라도 다른 사람을 도울 수 있다면...

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

export interface MyComponentProps extends RouteComponentProps<any> {
  propA: String;
  propB: Number;
}

function MyComponent(props: MyComponentProps) {
   return (
     <div>
        <div>{props.propA} - {props.propB}</div>
        <button onClick={() => props.history.push('/some-other-page')}>Go</button>
     </div>
   )
}

export default withRouter(MyComponent);

단 두 가지 열쇠는 다음과 같습니다.

1. 소품을 올바르게 입력합니다.

interface MyComponentProps extends RouteComponentProps {/*...*/}
class MyComponent extends React.Component<MyComponentProps , MyComponentState> {/*...*/}

2. withRouter()랩connect()

withRouter(
  connect(null, {
    ...MyReduxActions
  })(MyComponent)
);

"any" 타입에 문제가 있는 경우 이러한 트릭을 수행할 수 있습니다.그것은 나에게 효과가 있었다.

import { withRouter, RouteComponentProps } from 'react-router-dom';

type ComponentProps = RouteComponentProps;

const Component: React.FC = () => {
   return <div>This is component</div>
}

export default withRouter(Component)

언급URL : https://stackoverflow.com/questions/48219432/react-router-typescript-errors-on-withrouter-after-updating-version