错误消息说在 html 中使用 cdn 时未定义 browserRouter答案

【问题标题】：The error message says browserRouter is not defined when using cdn in a html错误消息说在 html 中使用 cdn 时未定义 browserRouter
【发布时间】：2022-01-16 13:51:09
【问题描述】：

我正在尝试在单个 html 页面中执行此操作。我首先使用 unpkg.com 导入所需的东西，例如 React 和 React-router-dom。如果我使用简单的 React 人员，页面可以加载。然后我尝试使用 React-router-dom，在 head 标签中添加脚本并创建一个简单的 mydiv7。它显示一条错误消息。请帮我看看这段代码有什么问题。

  <!DOCTYPE html>
    <html>
      <head>
        <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
        <script src="https://unpkg.com/react-router-dom/umd/react-router-dom.development.js" crossorigin></script>
        
      </head>
      <body>
  
 
    
    <div id="mydiv7"></div>
        
    <script type="text/babel">
    
    const Layout = () => {
      return (
        <>
          <nav>
            <ul>
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <Link to="/blogs">Blogs</Link>
              </li>
              <li>
                <Link to="/contact">Contact</Link>
              </li>
            </ul>
          </nav>
    
          <Outlet />
        </>
      )
    };
    
    const Home = () => {
      return <h1>Home</h1>;
    };
    
    
    const Blogs = () => {
      return <h1>Blog Articles</h1>;
    };
    
    
    const Contact = () => {
      return <h1>Contact Me</h1>;
    };
    
    
    const NoPage = () => {
      return <h1>404</h1>;
    };
    
        
    function App() {
      return (
        <BrowserRouter>
          <Routes>
            <Route path="/" element={<Layout />}>
              <Route index element={<Home />} />
              <Route path="blogs" element={<Blogs />} />
              
              <Route path="*" element={<NoPage />} />
            </Route>
          </Routes>
        </BrowserRouter>
      );
    }
        ReactDOM.render(<App />, document.getElementById('mydiv7'));
    </script>
      </body>
    </html>

【问题讨论】：

标签： javascript html reactjs react-router-dom

【解决方案1】：

您需要根据documentation 导入BrowserRouter。您可以使用 cdn 使用对窗口的引用进行导入，如下所示。

const BrowserRouter = window.ReactRouterDOM.BrowserRouter;

【讨论】：

为什么我不需要 "import React from "react";"？我看到一些脚本需要这个，但我可以不用它。例如，函数 Hello() { return
Hello World!
; }。 ReactDOM.render(, document.getElementById('mydiv'));
现在错误变成了“Uncaught TypeError: Cannot read properties of undefined (reading 'Routes')” 代码的其他部分有什么问题吗？
你需要导入你想要的库的所有部分。 Link, Route ecc...同理。
我已经按照其他答案的建议这样做了，但没有帮助。

【解决方案2】：

我相信在你的脚本中的某个地方你需要引用 react 路由器包，就像你使用 React 为 react 和 ReactDOM 为 react-dom 所做的那样。

据我所知，react-router-dom 被导出为ReactRouterDOM。

HTML Script Tags

为正在使用的react-router-dom 的特定版本加载 CDN 链接。当前是 v6.1.1。

<!-- Load React Router and React Router DOM -->
<script src="https://unpkg.com/react-router@6.1.1/umd/react-router.development.js" crossorigin></script>
<script src="https://unpkg.com/react-router-dom@6.1.1/umd/react-router-dom.development.js" crossorigin></script>

const BrowserRouter = ReactRouterDOM.BrowserRouter;
const Routes = ReactRouterDOM.Routes;
const Route = ReactRouterDOM.Route;

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="blogs" element={<Blogs />} />
          
          <Route path="*" element={<NoPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

【讨论】：

你怎么知道 react-router-dom 被导出为 ReactRouterDOM？有这些东西的文档吗？
现在错误变成了“Uncaught TypeError: Cannot read properties of undefined (reading 'Routes')” 代码的其他部分有什么问题吗？

Hello World!