ReactJS：[Home]不是&lt；Routing&>组件。&lt；Routs&>的所有组件子项必须是&lt；Routing&>或&lt；React.Fragment&>；

ReactJS: [Home] is not a lt;Routegt; component. All component children of lt;Routesgt; must be a lt;Routegt; or lt;React.Fragmentgt;(ReactJS：[Home]不是lt；Routing组件。lt；Routs的所有组件子项必须是lt；Routing或lt；React.Fragment；)

问题描述

单击开始测验按钮时，我正在尝试导航到"；/quz"；。

但是，当我编译代码时，网站应用程序出现以下错误：[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中只有空代码。

推荐答案

首先检查您的Reaction路由器DOM的版本。当您有Reaction-Router-Dom的v6时，会出现此错误。V6有许多开创性的更改，因此请尝试阅读官方文档 查看以下内容：https://reacttraining.com/blog/react-router-v6-pre/ 现在是你的问题部分 Reaction路由器V6引入路由

介绍路线

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

这篇关于ReactJS：[Home]不是&lt；Routing&>组件。&lt；Routs&>的所有组件子项必须是&lt；Routing&>或&lt；React.Fragment&>；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！