您正在正在运行 ES 模块构建的页面上加载 React Router 的 CommonJS 构建，因此事情无法正常工作

Question

错误：您正在正在运行 ES 模块构建的页面上加载 React Router 的 CommonJS 构建，因此事情无法正常工作。


//App.js

import React from "react";
import styled from "styled-components";
import LandingPage from "../src/pages/LandingPage";
import MainPage from "../src/pages/MainPage";
import Question from "../src/components/QuestionIcon";
import RichRoadLogo from "../src/img/richroad.png";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

function App() {
  return (
    <Router>
      <Container>
        <Head>
          <Logo src={RichRoadLogo} />
          <Profile />
        </Head>
        <Switch>
          <Route exact path="/">
            <Body>
              <LandingPage />
            </Body>
          </Route>
          <Route exact path="/main">
            <Body>
              <MainPage />
            </Body>
          </Route>
        </Switch>
        <Question />
      </Container>
    </Router>
  );
}

//LandingPage.js

import React from "react";

import styled from "styled-components";
import google from "../img/google.png";
import { Link } from "react-router-dom"; //This is the problem.

function LandingPage() {
  return (
    <Container>
      <Text>
        나의 투자 수익률을
        <br />
        기록해보세요
      </Text>

      <LoginButton src={google} />
      <Link to="main">
        <GuestButton>구경하기</GuestButton>
      </Link>
    </Container>
  );
}

如果您从 LandingPage.js 编写

import { Link } from "react-router-dom"

，则会收到错误。拜托，我需要你的帮助。

“react-router-dom”版本是^5.2.1

Answer 1

围绕

<Body>

标签存在问题。我如下写了，解决了。

function App() {
  return (
    <Router>
      <Container>
        <Head>
          <Logo src={RichRoadLogo} />
        </Head>
        <Switch>
          <Body>
            <Route exact path="/">
              <LandingPage />
            </Route>
            <Route exact path="/main">
              <Profile />
              <MainPage />
            </Route>
          </Body>
        </Switch>
        <Question />
      </Container>
    </Router>
  );
}

和

<Link to="main"> //a typing error
<Link to="/main"> // solved

Answer 2

如果您使用来自

react-router

的多种类型的导入，则可能会发生这种情况：

import { Route } from "react-router-dom";
import Link from "react-router-dom/Link";

这为我解决了这个问题：

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

Answer 3

我在运行反应组件的单元测试用例时遇到此错误。该组件使用了

useLocation()

提供的

react-router-dom

钩子。我为解决这个问题所做的就是模拟我的测试文件中的模块，如下所示，

  jest.mock('react-router-dom', () => ({
    useLocation: () => { 
      //return stuffs the you want to use
      search: ''
      pathname: ''
  })

Answer 4

要解决错误

You are loading the CommonJS build of React Router on a page that is already running the ES modules build,

，您可以模拟

react-router-dom

模块，以确保整个应用程序中模块加载的一致性。

您可以通过使用 Jest 的

jest.mock

功能来实现此目的。

jest.mock('react-router-dom', () => ({
    useHistory: () => ({
        push: jest.fn(),
    }),
}));

此代码片段模拟了

useHistory

中的

react-router-dom

钩子，提供了一个模拟实现，其中

push

函数被替换为 Jest 模拟函数。

通过这样做，您可以确保即使在应用程序的不同部分中导入或加载 React Router 的方式存在不一致，

useHistory

钩子也将具有一致的行为，从而减轻错误。

这种方法有助于保持兼容性和一致性，确保依赖于 React Router 的组件在应用程序的不同部分顺利运行。

Answer 5

运行两个不同的构建模块似乎存在冲突。

转到node_modules文件夹并查找react-router-dom
展开文件夹，我所做的是删除了 es 文件夹，因为它包含类似的 js 文件，这些文件位于 React-router-dom 的同一文件夹中。

es 文件夹在这里，这造成了冲突：

您正在正在运行 ES 模块构建的页面上加载 React Router 的 CommonJS 构建，因此事情无法正常工作

问题描述投票：0回答：5

5个回答

最新问题

您正在正在运行 ES 模块构建的页面上加载 React Router 的 CommonJS 构建，因此事情无法正常工作

问题描述 投票：0回答：5

5个回答

最新问题

问题描述投票：0回答：5