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

Question

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

但是，当我编译代码时，我在网站应用程序上收到以下错误：

[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 中只有空代码。

Answer 1

首先检查你的react router Dom的版本。当你有react-router-dom V6时会出现这个错误。 V6 有很多突破性的改变，所以尝试阅读官方文档 看看这个：https://reacttraining.com/blog/react-router-v6-pre/ 现在回答你的问题部分 React router 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/migration-5-to-6.md#relative-routes-and-links

Answer 2

仅允许

Route

或

React.Fragment

为

Routes

组件的子组件，反之亦然。您已经在“/”路径上渲染了一个

Home

组件，因此请删除无关的

<Home />

组件。看来您也在使用

react-router-dom

v6，因此

Route

组件不再通过

render

或

component

道具渲染组件，它们现在将组件 渲染为 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>

Answer 3

尝试这个语法对我有用

 <Routes>
      <Route path="expenses" element={<Expenses />} />
      <Route path="invoices" element={<Invoices />} />
 </Routes>

请参阅文档了解更多信息 https://reactrouterdotcom.fly.dev/docs/en/v6/getting-started/tutorial

Answer 4

将这些添加到您的index.js文件中

1. import { BrowserRouter } from "react-router-dom";
2.  <BrowserRouter>
      <App />
    </BrowserRouter>

将这些添加到您的 App.js 文件中

1. import { Routes, Route } from "react-router-dom";
2. <Routes>
      <Route path="/" element={<AllMeetups />}>  </Route>
    </Routes>

查看此链接了解更多 https://www.youtube.com/watch?v=OAjzvS_57z0

Answer 5

这是react-router-dom的旧版本代码。并且它不会在 v6 代码中运行。

 <Route path="/home">
  <Header />
  <MyPage/>
</Route>

因此，您必须按照以下格式升级您的代码。这意味着您只需将组件放入 element

 <Route path="/home" element={
      <>
        <Header />
        <MyPage />
      </>
    }
    />

我希望这个解决方案能够奏效。 谢谢。

Answer 6

两种选择：

选项 1。使用柯里化函数将每个延迟加载的 Route 元素包装在 Suspense 组件中。这避免了在每个 Route 的 element prop 中这样做。

import { Suspense } from "react";

export const Loadable = (Component: any) => (props: any) => {
  return (
    <Suspense fallback={<p>Loading</p>}>
      <Component {...props} />
    </Suspense>
  );
};

选项 2：通过数据声明路由，而不是使用 Route 组件。使用自定义函数（本例中为

createRoutesWithSuspenseWrappers

）生成每条路由，并包裹在 Suspense 中。

const routes = createRoutesWithSuspenseWrappers([
  { path: '/', element: <Root /> },
  // ...
]);

createBrowserRouter(routes);