如何解决ReactRouterDOM未定义错误？

Question

如何解决ReactRouterDOM未定义错误？

mak*_*aki 5 html javascript reactjs react-router react-router-dom

我不断收到ReactRouterDOM错误，但我正在遵循教程，而我的教授没有收到此错误（视频可能已过时）。

索引.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Routing</title>

    <!-- Load Babel -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  </head>
  <body>

  <div id="root"></div> <!--- element we're going to target calling it root-->
 
  <!-- Load React -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->


  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
 
  <!-- Load our React component. -->
  <script src="index.js" defer type="text/babel"></script>
  <script src="home.js" defer type="text/babel"></script>
  <script src="about.js" defer type="text/babel"></script>
  <script src="products.js" defer type="text/babel"></script>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

索引.js

function Spa(){
  const Route = ReactRouterDOM.Route;
  const Link = ReactRouterDOM.Link;
  const HashRouter = ReactRouterDOM.HashRouter;
     
  return (
    <HashRouter>
      <div>
        <h1> Hello World </h1>
        <Link to="/">Home</Link> --
        <Link to="/about/">about</Link> --
        <Link to="/products/">products</Link> 
        <hr/>
        <Route path="/" exact component={Home} />
        <Route path="/about/" exact component={about} />
        <Route path="/products/" exact component={products} />
      </div>
    </HashRouter>
  );
}

//Loads application
ReactDOM.render(
  <Spa/>,
  document.getElementById('root')
)

Run Code Online (Sandbox Code Playgroud)

我已经尝试添加

function Spa(){
  const Route = ReactRouterDOM.Route;
  const Link = ReactRouterDOM.Link;
  const HashRouter = ReactRouterDOM.HashRouter;
     
  return (
    <HashRouter>
      <div>
        <h1> Hello World </h1>
        <Link to="/">Home</Link> --
        <Link to="/about/">about</Link> --
        <Link to="/products/">products</Link> 
        <hr/>
        <Route path="/" exact component={Home} />
        <Route path="/about/" exact component={about} />
        <Route path="/products/" exact component={products} />
      </div>
    </HashRouter>
  );
}

//Loads application
ReactDOM.render(
  <Spa/>,
  document.getElementById('root')
)

Run Code Online (Sandbox Code Playgroud)

和许多变化，但我仍然遇到相同的错误。

Answer 1

Dre*_*ese 0

在您的脚本中，您需要像使用Reactforreact和ReactDOMfor一样引用 React 路由器包react-dom。

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

react-router-dom加载正在使用的特定版本的 CDN 链接。当前版本是 v6.14.2。看起来你正在尝试使用 v5。

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

Run Code Online (Sandbox Code Playgroud)

或者如果您想要生产版本：

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	2 年，9 月前
查看次数：	445 次
最近记录：	2 年，9 月前