时间戳

首页 > 解决方案 > 如何解决 reactDOM.render 的错误

reactjs - 如何解决 reactDOM.render 的错误

问题描述

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "/src/App.jsx";
import { BrowserRouter } from "react-router-dom";


ReactDOM.render(
  <>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </>,
  document.getElementById("root")
);

应用程序.jsx

import React from "react";
import { Switch, Route } from "react-router-dom";
import Home from "/src/Home.jsx";

function App() {
  return (
    <>
      <Switch>
        <Route exact path="/" component={Home} />
      </Switch>
    </>
  );
}

export default App;

这是代码框： https ://codesandbox.io/s/webapp-3tw58

遇到错误，不知道如何解决

元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。检查App.

标签： reactjs

解决方案

你在那边犯了一些错误，关于import这一切。

首先是您不能使用文件扩展名导入。

从“/src/App.jsx”导入应用程序；

反而

import App from "/src/App";

文件也一样App.jsx。

import Home from "/src/Home";

或者

我建议使用相对导入，

import App from "./App";

也许这导致了实际问题。

更新：

通过查看您的代码框，您正在react-router-dom@v6使用Route. 请从这里阅读。

推荐阅读