javascript ReactJS:[Home]不是< Route>组件,的所有组件子级< Routes>必须是< Route>或< React.Fragment>

7kjnsjlb  于 2023-02-02  发布在  Java
关注(0)|答案(5)|浏览(222)

单击“开始测验”按钮时,我尝试导航到“/quiz”。
然而,当我编译我的代码时,我在网站应用程序上得到以下错误:[Home] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
我是新的React,如果有人能帮助我,我将不胜感激!
下面是我的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中只有空代码。

jhkqcmku

jhkqcmku1#

首先检查您的react router Dom的版本。这个错误出现时,你有V6的react-router-dom。V6有许多突破性的变化,所以尝试阅读官方文档检查这个:https://reacttraining.com/blog/react-router-v6-pre/现在回答您的问题部分React路由器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

icnyk63a

icnyk63a2#

只允许RouteReact.Fragment作为Routes组件的子组件,反之亦然。您已经在“/”路径上呈现了Home组件,因此请删除多余的<Home />组件。您似乎还在使用react-router-dom v6,因此Route组件不再通过rendercomponent属性呈现组件,它们现在将组件***呈现为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>
voase2hg

voase2hg3#

我试试这个语法

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

有关https://reactrouterdotcom.fly.dev/docs/en/v6/getting-started/tutorial的更多信息,请参阅文档

hgtggwj0

hgtggwj04#

将这些添加到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

aiazj4mn

aiazj4mn5#

两个选项:

    • 选项1**。使用curried函数将每个延迟加载的Route元素 Package 在Suspense组件中。这避免了必须在每个Route的元素prop中这样做。
import { Suspense } from "react";

export const Loadable = (Component: any) => (props: any) => {
  return (
    <Suspense fallback={<p>Loading</p>}>
      <Component {...props} />
    </Suspense>
  );
};
    • 备选案文2**:通过数据声明路由,而不是使用Route组件。使用自定义函数(本例中为createRoutesWithSuspenseWrappers)生成每个Route,并 Package 在Suspense中。
const routes = createRoutesWithSuspenseWrappers([
  { path: '/', element: <Root /> },
  // ...
]);

createBrowserRouter(routes);

相关问题