ReactJS：\[Home\] 不是 <Route> 组件。 <Routes> 的所有子组件必须是 <Route> 或 <React.Fragment>

Question

单击开始测验按钮时，我试图导航到“/测验”。

但是，当我编译我的代码时，网站应用程序出现以下错误： [Home] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

我是新手，如果有人能帮助我，我将不胜感激！

这是我的 App.js 代码：

 import { BrowserRouter, Routes, Route } from "react-router-dom";
import Footer from "./components/Footer/Footer";
import Header from "./components/Header/Header";
import Home from "./Pages/Home/Home";
import Quiz from "./Pages/Quiz/Quiz";
import "./App.css";
function App() {
  return (
    <BrowserRouter>
      <div className="App" style={{ backgroundImage: "url(./circle.jpg)" }}>
        <Header />
        <Routes>
          <Route exact path="/" component={Home} />
          <Route path="/quiz" component={Quiz} />
          <Home />
        </Routes>
      </div>
      <Footer />
    </BrowserRouter>
  );
}

export default App;

这是我的 Home.js 代码：

 import { Button } from "@material-ui/core";
import { Container } from "@material-ui/core";
import { useNavigate } from "react-router-dom";
import "./Home.css";

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

  const sendSubmit = () => {
    navigate("/quiz");
  };
  return (
    <Container className="content">
      <h1 id="quiz-title">Phishing Quiz</h1>
      <h2 class="question-text">
        Do you think you can beat our phishing quiz?
      </h2>
      <p className="description">
        {" "}
        There are many social engineering attacks on internet however not all of
        them are good enough to trick users. However there are some scams that
        are identical to original websites and usually most of the users get
        tricked by them.
      </p>
      <p className="description">
        Do you think you are smart enough to handle these attacks?
      </p>
      <p className="description">
        We are challenging you with our phishing quiz which will show you
        examples of really good social engineering attacks on internet. We hope
        you can pass!
      </p>
      <p>""</p>
      <Button
        variant="contained"
        color="primary"
        size="large"
        onClick={sendSubmit}
      >
        Start Quiz
      </Button>
    </Container>
  );
};

export default Home;

目前我在 Quiz.js 中只有空代码。

原文由 dojomaker 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

首先检查你的 react router Dom 的版本。当你有 react-router-dom 的 V6 时会出现这个错误。 V6 有许多突破性的变化，所以请尝试阅读官方文档检查一下：https: //reacttraining.com/blog/react-router-v6-pre/ 现在是你的问题部分 React router v6 introduce Routes

介绍路线

v6 中最激动人心的变化之一是强大的新元素。这是 v5 元素的重大升级，具有一些重要的新功能，包括相对路由和链接、自动路由排名以及嵌套路由和布局。

   <BrowserRouter>
      <div className="App" style={{ backgroundImage: "url(./circle.jpg)" }}>
        <Header />
        <Routes>
          <Route exact path="/" element={<Home/>} />
          <Route path="/quiz" element={<Quiz/>} />

        </Routes>
      </div>
      <Footer />
    </BrowserRouter>

还要检查从 v5 到 v6 的迁移指南 https://github.com/ReactTraining/react-router/blob/f59ee5488bc343cf3c957b7e0cc395ef5eb572d2/docs/advanced-guides/migrating-5-to-6.md#relative-routes-and-links

原文由 salik saleem 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

只有 Route 或 React.Fragment 允许成为 Routes 组件的子组件，反之亦然。您已经在“/”路径上渲染了一个 Home 组件，因此删除无关的 <Home /> 组件。 It appears you are also using react-router-dom v6, so the Route components no longer render components via a render or component prop, they now在 element 属性上将组件渲染 为 JSX 。

 <Routes>
  <Route exact path="/" component={Home} />
  <Route path="/quiz" component={Quiz} />
  <Home /> // <-- remove this
</Routes>

至

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/quiz" element={<Quiz />} />
</Routes>

原文由 Drew Reese 发布，翻译遵循 CC BY-SA 4.0 许可协议