React/Typescript Route 组件字段类型错误答案

【问题标题】：React/Typescript Route component field type errorReact/Typescript Route 组件字段类型错误
【发布时间】：2019-08-17 11:52:54
【问题描述】：

尝试使用一些路由设置浏览器路由器，但 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"
  }

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

【问题讨论】：

标签： reactjs typescript react-router-dom

【解决方案1】：

将 React.SFC 更改为 React.FC

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

export interface AppProps {}

const App: React.FC<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;

【讨论】：