在 index.html 中使用来自 CDN 链接的 React 组件

Question

我在这里有一些代码，我试图将路由添加到 index.html 文件（我在 vscode 上使用 liveServer 运行该文件）。 我不明白如何从 react-router-dom 正确“导入”所需的 react 组件，我已通过脚本标记将其作为 cdn 包含在文件中。 我一直在尝试将我的代码与此站点https://reacttraining.com/react-router/web/example/basic进行比较。 现在我收到以下错误：

react-dom.development.js:24134 未捕获的错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件）但得到：未定义。 您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

这是代码，任何帮助将不胜感激！！

<html>
  <head>
    <script
      src="https://unpkg.com/react@16/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
      crossorigin
    ></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <script
      crossorigin
      src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/5.1.2/react-router-dom.min.js"
    ></script>

    <body>
      <div id="root"></div>
      <script type="text/babel">
        const { BrowserRouter } = ReactRouterDOM;
        const { Router } = ReactRouterDOM.BrowserRouter;
        const { Route } = ReactRouterDOM.BrowserRouter;
        const { Switch } = ReactRouterDOM.BrowserRouter;
        class Home extends React.Component {
          render() {
            return <div>THIS IS HOME</div>;
          }
        }
        class About extends React.Component {
          render() {
            return <div>THIS IS THE ABOUT PAGE</div>;
          }
        }
        class Help extends React.Component {
          render() {
            return <div>THIS IS THE HELP PAGE</div>;
          }
        }
        class App extends React.Component {
          render() {
            return (
              <Router>
                <Switch>
                  <Route exact={true} path="/">
                    <Home />
                  </Route>
                  <Route path="/about">
                    <About />
                  </Route>
                  <Route path="/help">
                    <Help />
                  </Route>
                </Switch>
              </Router>
            );
          }
        }
        ReactDOM.render(<App />, document.getElementById("root"));
      </script>
    </body>
  </head>
</html>

Answer 1

您的路由器组件名称分配不正确。 更改此代码块：

const { BrowserRouter } = ReactRouterDOM;
const { Router } = ReactRouterDOM.BrowserRouter;
const { Route } = ReactRouterDOM.BrowserRouter;
const { Switch } = ReactRouterDOM.BrowserRouter;

对此（或在语法上等效的东西）：

var Router = ReactRouterDOM.BrowserRouter; // or HashRouter
var Route = ReactRouterDOM.Route;
var Switch = ReactRouterDOM.Switch;
var browserHistory = ReactRouterDOM.browserHistory;

在 index.html 中使用来自 CDN 链接的 React 组件

问题描述

1 个解决方案

解决方案1
0 2020-10-23 01:42:18

在 index.html 中使用来自 CDN 链接的 React 组件

问题描述

1 个解决方案

解决方案1 0 2020-10-23 01:42:18

解决方案1
0 2020-10-23 01:42:18