与 Error occurring while using router in react 有关的问题

Question

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

代码：

Index.js

import { StrictMode } from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  rootElement
);

App.js

import React from "react";
import Home from "./Home";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </div>
      <Switch>
        <Route path="/" exact></Route>
      </Switch>
    </Router>
  );
}

Home.js

import React from "react";

function Home() {
  return (
    <div>
      <h2>Hello You are at Home </h2>
    </div>
  );
}

export default Home;

Answer 1

使用 react-router-dom v6 定义如下路由：

export default function App() {
  return (
    <Router>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/about' element={<About />} />
      </Routes>
    </Router>
  );
}

在Home.js中：

function Home() {
  return (
    <>
      <div>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </div>
      <div>
        <h2>Hello You are at Home </h2>
      </div>
    </>
  );
}

所以问题是将链接与路由器分开。

Answer 2

我可以在使用 react-router-dom v6 时重现错误。 RRDv6 不导出 Switch 组件，它被有效地替换为处理匹配和呈现 Route 组件的必需 Routes 组件。

如果您不打算安装最新版本的 react-router-dom 然后将您的项目回滚到以前的 v5 版本。

从您的项目目录运行:

卸载任何当前版本

npm run uninstall -s react-router-dom react-router

安装最新的 v5 版本

npm run install -s react-router-dom@5 react-router@5

如果您决定继续使用 RRDv6，则需要进行一些迁移。

将 Switch 组件替换为 Routes 组件
移动要在 Route 组件的 element prop

Home

示例：

export default function App() {
  return (
    <Router>
      <div>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </div>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </Router>
  );
}

有关更多详细信息和其他更改，请参阅 Migration Guide。

与 Error occurring while using router in react 有关的问题

Question related to Error occuring while using router in react

javascript

reactjs

react-router

react-router-dom