Question

尝试设置具有某些路由的浏览器路由器，但打字稿在传递的组件上抛出类型错误，并且无法编译。

我正在使用带有以下代码的react typescript：

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"
  }

任何帮助或指针将不胜感激

反应/打字稿路线组件字段类型错误

0 个答案: