尝试在 app.js 中创建多个页面时，我不断遇到此错误 - 该怎么办？

Question

我正在尝试制作一个包含多个页面的投资组合网站（使用 React Codesandbox）来谈论我，并且在我的 React 应用程序中遇到一条错误消息，指出“元素类型无效”。当尝试渲染未定义或未正确导出的组件时，通常会发生此错误。

在我的代码片段中，使用 React Router 渲染路由时，App 组件中发生错误。我不知道如何才能成功调试此错误。有人可以帮助我了解发生了什么以及我可以采取哪些措施来纠正此错误？感谢您抽出时间来处理此问题。

App.js

// App.jsx
import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Landing from "./pages/landing";
import List from "./pages/toc";
import About from "./pages/about";
import "./styles.css";

const App = () => {
  return (
    <Router>
      <div className="app">
        <Switch>
          <Route exact path="/" component={Landing} />
          <Route path="/table-of-contents" component={List} />
          <Route path="/about" component={About} />
        </Switch>
      </div>
    </Router>
  );
};

export default App;

我尝试调试哪条路线弄乱了代码，但结果发现路线本身有缺陷。我不知道完成react-router-dom页面创建的具体步骤。

P.S.：这是分叉的 codesandbox 页面的链接：

Answer 1

您的代码是较旧的 React-Router-DOM v4/5 语法，但您已指定 React-Router-DOM v6 作为依赖项。

使用React-Router-DOM v4/5

如果您想继续使用当前代码，那么您需要降级

react-router-dom

依赖项。

• 卸载当前的 v6 版本：

  npm uninstall --save react-router-dom

• 安装最新版本5：

  npm install --save react-router-dom@5

使用React-Router-DOM v6

如果您想使用当前版本的

react-router-dom

，那么您需要修复几个重大更改。

• 不再有任何

  Switch

  组件，它被

  Routes

  组件取代。

• Route

  组件API也进行了一些更改，不再有任何

  component

  （和

  render

  和

  children

  函数道具），取而代之的是单个

  element

  道具采用

  React.ReactNode

  ，又名 JSX，价值。
• 删除了

  useHistory

  钩子，取而代之的是

  useNavigate

  钩子，该钩子返回

  navigate

  函数而不是

  history

  对象。

更新

App

以导入和使用

Routes

组件。在

element

属性上正确渲染路由内容。

import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Landing from "./pages/landing";
import List from "./pages/toc";
import About from "./pages/about";
import "./styles.css";

const App = () => {
  return (
    <Router>
      <div className="app">
        <Routes>
          <Route path="/" element={<Landing />} />
          <Route path="/table-of-contents" element={<List />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </div>
    </Router>
  );
};

export default App;

将布线组件中的

useHistory

挂钩替换为

useNavigate

挂钩。

着陆

import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import "/src/styles/hero.css";

const Landing = () => {
  const [typingComplete, setTypingComplete] = useState(false);
  const navigate = useNavigate();

  const handleClick = () => {
    // Navigate to the '/table-of-contents' route when clicked
    navigate("/table-of-contents");
  };

  const handleTypingComplete = () => {
    setTypingComplete(true);
  };

  return (
    <div className="landing" onClick={handleClick}>
      <h1
        className="title typing-animation glow-text"
        onAnimationEnd={handleTypingComplete}
      >
        John Doe
      </h1>
      <h2 className={`subtitle ${typingComplete ? "fade-in glow-text" : ""}`}>
        <span>
          <em>Click</em> to get started
        </span>
      </h2>
    </div>
  );
};

export default Landing;

目录

import React from "react";
import { useNavigate } from "react-router-dom";
import logo from "../pictures/trace.svg";
import "../styles/hero.css";
import "../styles/toc.css";
import Card from "../components/card";

const List = () => {
  const navigate = useNavigate();

  // Function to handle card click and navigate to a specific route
  const handleCardClick = (route) => {
    navigate(route); // Navigate to the specified route
  };

  return (
    <div className="toc">
      <h1 className="h1 toc-heading">Table Of Contents</h1>
      <div className="cards-container">
        {/* Add onClick handlers to the cards */}
        <Card
          title="1"
          className="item"
          content="About Me"
          onClick={() => handleCardClick("/about-me")} // Navigate to "/about-me" route
        />
        <Card
          title="2"
          className="item"
          content="Resume"
          onClick={() => handleCardClick("/resume")} // Navigate to "/resume" route
        />
        <Card
          title="3"
          className="item"
          content="Projects"
          onClick={() => handleCardClick("/projects")} // Navigate to "/projects" route
        />
        <Card
          title="4"
          className="item"
          content="Contact"
          onClick={() => handleCardClick("/contact")} // Navigate to "/contact" route
        />
      </div>
      <div className="logo-container">
        <img alt="" src={logo} width="90" height="60" className="logo" />
      </div>
    </div>
  );
};

export default List;