Ошибка типа поля компонента React / Typescript Route - PullRequest
4 голосов
/ 27 марта 2019

Попытка настроить маршрутизатор браузера с некоторыми маршрутами, но машинописный текст выдает ошибку типа на переданных компонентах и ​​не будет компилироваться.

Я использую машинный текст с приведенным ниже кодом:

import { BrowserRouter, Switch, Route } from "react-router-dom";

export interface AppProps {}

const App: React.SFC<AppProps> = () => {
  return (
    <BrowserRouter>
      <div className="App">
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/feed" component={Feed} />
          <Route path="/project/:projectid" component={Project} />
          <Route path="/user/:userid" component={Profile} />
        </Switch>
      </div>
    </BrowserRouter>
  );
};
export default App;

выдает эту ошибку на каждое из полей компонента

Type 'typeof import("/Users/colbygilbert/Documents/EOS/DevelopX/frontend/src/components/home/Home")' is not assignable to type 'ComponentClass<any, any> | FunctionComponent<any> | ComponentClass<RouteComponentProps<any, StaticContext, any>, any> | FunctionComponent<RouteComponentProps<any, StaticContext, any>> | undefined'.
  Type 'typeof import("/Users/colbygilbert/Documents/EOS/DevelopX/frontend/src/components/home/Home")' is not assignable to type 'FunctionComponent<RouteComponentProps<any, StaticContext, any>>'.
    Type 'typeof import("/Users/colbygilbert/Documents/EOS/DevelopX/frontend/src/components/home/Home")' provides no match for the signature '(props: RouteComponentProps<any, StaticContext, any> & { children?: ReactNode; }, context?: any): ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)> | null'.ts(2322)
index.d.ts(87, 3): The expected type comes from property 'component' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Route<RouteProps>> & Readonly<{ children?: ReactNode; }> & Readonly<RouteProps>'

Вот пример моего компонента Home:

export interface HomeProps extends RouteComponentProps<{}>{
  auth: Auth;
}


const Home: React.SFC<HomeProps> = ({ auth }) => {
  if (auth.uid) return <Redirect to="/feed" />;
  return (
    <div>
      <Nav size="bg" />
      <div className="c_header__spacing">
        <Vision />
        <Demo />
        <Featurette />
      </div>
    </div>
  );
};

const mapStateToProps = (state: any) => {
  return {
    auth: state.firebase.auth
  };
};

export default connect(mapStateToProps)(Home);

Текущие зависимости:

"dependencies": {

    "@types/react-router": "^4.4.5",
    "@types/react-router-dom": "^4.3.1",
    "@types/react-router-redux": "^5.0.18",
    "react-router": "^5.0.0",
    "react-router-dom": "^5.0.0",
    "react-router-redux": "^4.0.8",
    "typescript": "3.3.3"
  }

Любая помощь или указатели будут с благодарностью

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...