Typescript 在将 Suspense 与 React Router 一起使用时抛出显式函数返回类型错误

Question

我尝试使用悬念和反应路由器，但我无法弄清楚它应该返回什么，我不想禁用此规则。完整的错误消息：

Type '{ history: History<any>; location: Location<any>; match: 
match<any>; staticContext?: StaticContext | undefined; }' has no 
properties in common with type 'IntrinsicAttributes & { children?: 
ReactNode; }'

import React, { FunctionComponent, lazy, Suspense } from 'react';
import { BrowserRouter, Route, Link, Switch } from 'react-router-dom';
import Loader from '../../Loader';
import Navbar from '../Navbar/Navbar';
const SignUpForm = lazy(() => import('../SignUpForm/SignUpForm'));
const Router: FunctionComponent = (): JSX.Element => {
  return (
    <BrowserRouter>
      <>
        <Navbar />
        <div className="main-container">
          <Switch>
            <Route
              path="/sign-up"
              render={props => (
                <Suspense fallback={<Loader />}>
                  <SignUpForm {...props} />
                </Suspense>
              )}
            />
          </Switch>
        </div>
      </>
    </BrowserRouter>
  );
};
export default Router;

Answer 1

我通过将RouteComponentProps作为SignUpFormComponent中的props类型传递来解决此问题。

import React, { FunctionComponent, useState, SyntheticEvent } from 'react';
import { RouteComponentProps } from 'react-router-dom';
const SignUpForm: FunctionComponent<RouteComponentProps> = (): JSX.Element => {
  const submitHandler = async (e: SyntheticEvent): Promise<void> => {
    e.preventDefault();
  };
  return (
    <form onSubmit={submitHandler}>
      
    </form>
  );
};
export default SignUpForm;