“反应”未定义用于与打字稿的React路由器

Question

这是我想通过Typescript运行的React路由器设置。它没有打字稿，但不使用它。我在浏览器控制台中遇到了一个运行时错误。换液效果很好。如果我分别包含" react.js"one_answers" react-dom.js"或包含所有内容的巨型" bundle.js"，则不会有区别。我在做什么错？

错误：

Router.js:91 Uncaught TypeError: Cannot read property 'Component' of undefined
// For context, the line says: React.Component
at Object../node_modules/react-router/es/Router.js (Router.js:91)
at __webpack_require__ (bootstrap:19)
at Object../node_modules/react-router-dom/es/Router.js (Router.js:2)
at __webpack_require__ (bootstrap:19)
at Object../node_modules/react-router-dom/es/BrowserRouter.js (BrowserRouter.js:11)
at __webpack_require__ (bootstrap:19)
at Object../node_modules/react-router-dom/es/index.js (index.js:1)
at __webpack_require__ (bootstrap:19)
at Object../src/index.tsx (index.tsx:3)
at __webpack_require__ (bootstrap:19)

代码：

import * as React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch }  from "react-router-dom";
class App extends React.Component {
  render() {
    return (
        <Router>
        <Switch>
        <Route path="/test/" render={() => (
            <div>
                Test.
            </div>
        )} />
        <Route exact={true} path="/" render={() => (
            <div>
                Root page.
            </div>
        )} />
        </Switch>
        </Router>
    );
  }
}
ReactDOM.render(
    <App />,
    document.getElementById("root") as HTMLElement
);

Answer 1

好吧。

解决方案是将"esModuleInterop": true添加到我的tsconfig.json。

此外，"allowSyntheticDefaultImports": true允许我编写import React from "react";而不是import * as React from "react";。

谢谢大家。

Answer 2

导入的方式是问题。您应该用这样的东西替换所有导入语句：

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";