1

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.

4

2 回答 2

2

你在那边犯了一些错误，关于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. 请从这里阅读。

于 2021-11-16T09:05:41.677 回答
1

正如@Pradip Dhakal 所提到的，这可能是由 react-router-dom 版本不匹配引起的问题。根据新文档更新路由定义似乎可以解决问题：

应用程序.jsx

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Home";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

主页.jsx

import React from "react";

function Home() {
  return <div>Home</div>;
}

export default Home;
于 2021-11-16T09:16:29.550 回答