Блог

Главная - Вопросы по программированию - Typescript выдает явную ошибку типа возвращаемой функции при использовании Suspense с маршрутизатором React

Typescript выдает явную ошибку типа возвращаемой функции при использовании Suspense с маршрутизатором React

#javascript #reactjs #typescript #react-router

#javascript #reactjs #typescript #react-router

Вопрос:

Я пытался использовать suspense и react router, но я не могу понять, что он должен возвращать, и я не хочу отключать это правило. Полное сообщение об ошибке:

 Type '{ history: History<any>; location: Location<any>; match: 
match<any>; staticContext?: StaticContext | undefined; }' has no 
properties in common with type 'IntrinsicAttributes amp; { 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;

Ответ №1:

Я исправил проблему, передав RouteComponentProps в качестве типа реквизита в моем SignUpFormComponent.

 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;