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

Posted 2023-02-22

【中文标题】React/Typescript Route 组件字段类型错误

【英文标题】：React/Typescript Route component field type error

【发布时间】：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"
  

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

【参考方案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;