Acabo de intentar actualizar mi aplicación React a
reaccionar-enrutador - 4.0.19 a 4.0.20
reaccionar- 16.0.30 a 16.0.34
versión mecanografiada "2.7.0-insiders.20180108"
En mi aplicación, donde sea que esté usando 'withRouter', ahora obtengo errores crípticos de Typescript. Incluso reemplacé todos los accesorios de la interfaz con 'cualquiera' solo para intentar que funcionara.
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);error TS2345: Argumento de tipo 'ComponentClass> & { WrappedComponent: ComponentType; }' no se puede asignar al parámetro de tipo 'ComponentType>'. Escriba 'ComponentClass> & { WrappedComponent: ComponentType; }' no se puede asignar al tipo 'StatelessComponent>'. Escriba 'ComponentClass> & { WrappedComponent: ComponentType; }' no proporciona ninguna coincidencia para la firma '(props: RouteComponentProps & { children?: ReactNode; }, context?: any): ReactElement | nulo'.
Si convierto la última línea a esto:
export const Main = connect(mapStateToProps)(MainForm);no me salen errores seriamente frustrado aquí. Gracias
EDITAR , cambié a
export const Main = connect(mapStateToProps)(withRouter(MainForm));como lo sugiere Mayank Shukla. pero ahora sale el error:
error TS2345: el argumento de tipo 'ComponentClass>' no se puede asignar al parámetro de tipo 'ComponentType<{ state: RootState; } & DispatchProp>'. El tipo 'ComponentClass>' no se puede asignar al tipo 'StatelessComponent<{ state: RootState; } & DispatchProp>'. El tipo 'ComponentClass>' no proporciona ninguna coincidencia para la firma '(props: { state: RootState; } & DispatchProp & { children?: ReactNode; }, context?: any): ReactElement | nulo'.
Acabo de actualizar a TypeScript 2.6 y tengo el mismo problema.
Logré resolverlo usando RouteComponentProps .
Para URL http://localhost:8080/your-component/abc y ruta
<Route component={YourComponent} path="/your-component/:param1?" />El componente debería verse así:
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);tengo que resolverlo asi:
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);Aquí hay un enfoque de reacción funcional que uso
import { RouteComponentProps } from "react-router"; interface Props extends RouteComponentProps { thing: Thing | false; onAction?: () => void; } export default withRouter(({ thing, onAction, history }: Props) => {