Как исправить: ReactDOM.render () - TS2345: Аргумент типа '() => Элемент' нельзя назначить параметру типа 'ReactElement'

Question

Я изучаю React-Router с машинописным шрифтом и сталкиваюсь с проблемой печати. ​​

Я работал на более старой версии реакции и маршрутизатора реакции.Я обновился до последних сборок с использованием пряжи.

import * as ReactDOM from "react-dom";
import AppRouter from "./routers/app-router";

ReactDOM.render(AppRouter, document.getElementById("app"));

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

const MainPage = () => <div>This is my mainpage.</div>;


const Header = () => (
  <header>
    <h1>Hello</h1>
    <NavLink to="/" activeClassName="is-active" exact={true}>
      Main
    </NavLink>
  </header>
);

const AppRouter = ()  => (
  <BrowserRouter>
    <div>
      <Header />
      <Switch>
        <Route path="/" component={MainPage} exact={true} />
      </Switch>
    </div>
  </BrowserRouter>
);

export default AppRouter;

Насколько я понимаю, ReactDOM.render () содержит 2 элемента.Мой const AppRouter относится к типу Element.Почему я получаю ошибку типа от ReactDOM.render ()?

Answer 1

ReactDOM.render(<AppRouter/>, document.getElementById("app"));

Это должно сработать, дайте мне знать, если это не так, проблема в том, что AppRouter не является действительным React.ReactElement, пока он не создан с помощью вызова React.createElement, что происходит за кулисами, когда JSXиспользуется синтаксис.

<AppRouter/> теперь станет React.createElement(ApppRouter);, что будет возвращать правильный тип React.ReactElement;