ReactJS:[กลับบ้าน]ไม่ใช่<เส้นทาง>ส่วนประกอบ. ทุกส่วนประกอบของเด็กที่<เส้นทาง>ต้องเป็น<เส้นทาง>หรือ<มีปฏิกิริยาอะไรเศษชิ้นส่วน>

0

คำถาม

ฉันกำลังพยายามที่จะนำมายัง"/ทำแบบทดสอบ"ตอนที่เริ่มสองปุ่มเป็นก็ลงตัว

แต่ตอนที่ฉัน compile ของรหัสผมกำลังตามข้อผิดพลาดที่เว็บไซต์ของโปรแกรม: [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 ตอนนี้

2

คำตอบที่ดีที่สุด

2

อย่างแรกตรวจดูเวอร์ชั่นของคุณมีปฏิกิริยา router Dom.ข้อผิดพลาดนี้ปรากฎเมื่อไหร่ที่คุณมี V6 ของโต้ตอบ-router-dom. V6 มี groundbreaking เปลี่ยนดังนั้นพยายามอ่านอย่างเป็นทางการเอกสารคู่มือ@info:shell ตรวจสอบเรื่องนี้ให้:https://reacttraining.com/blog/react-router-v6-pre/ ตอนนี้สำหรับคำถามของคุณส่วนหนึ่ง ตอบโต้ 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>

ยังดู migration นำทางจาก v5 จะ v6 https://github.com/ReactTraining/react-router/blob/f59ee5488bc343cf3c957b7e0cc395ef5eb572d2/docs/advanced-guides/migrating-5-to-6.md#relative-routes-and-links

2021-11-23 04:01:13

ขอบคุณมากสำหรับปฏิกิริยาของคุณมันทำงานสบายดีทุกอย่า!
dojomaker

เซลเล็มคือมันปกตินั่นหล่อนอาจจะเบื่อที่จะจูบของภาพพื้นหลังตอนที่ฉันคลิกที่ปุ่มใช่ไหม? ขอโทษถ้ามันเป็นโง่คำถาม
dojomaker

ฉันสามารถตอบเรื่องนี้โดยมองของคุณรหัสแบ่งปันอีกคำถามนึง
salik saleem

นี่คือของฉันหลักของรหัสและฉันมี 2 แฟ้มอื่นสำหรับส่วนหัวกระดาษและท้ายกระดาษแต่ฉันไม่คิดว่าพวกเขาต้องการ คุณสามารถช่วยดูจากบนแฟ้มเหล่านี้หรือคุณต้องการที่จะเห็นพวกเขา?
dojomaker
1

เพีย Route หรือ React.Fragment อนุญาตให้เป็นลูกของ Routes ส่วนประกอบและรอง-versa. คุณอยู่แล้วการแสดงผลเป็น Home ส่วนประกอบอยู่ที่"/"เส้นทางดังนั้นการลบ extraneous <Home /> ส่วนประกอบ. ดูเหมือนว่าคุณเป็นยังใช้ react-router-dom v6 ดังนั้น Route ส่วนประกอบไม่ได้จัดการพาส่วนประกอบผ่านทาง render หรือ component อุปกรณ์ประกอบที่พวกเขาตอนนี้จัดการพาส่วนประกอบ ที่ JSXelement อุปกรณ์

<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>
2021-11-23 03:20:06

ขอบคุณสำหรับปฏิกิริยาของคุณ! ถ้าผมจะใช้รหัสของคุณมัน compiles โดยไม่มีข้อผิดพลาดแต่มัน launches เป็นหน้าว่างเปล่า. มันไม่เรียกของฉัน home.js รหัส คุณรู้ไหมว่าทำไมเรื่องนี้อาจจะเป็นคดีเหรอ? ถ้าคุณสามารถช่วยฉันคงจะมีความสุข!
dojomaker

@dojomaker ไม่แน่ใจว่านั่นอาจจะมีบางสิ่งบางอย่างอื่นเกิดขึ้นในรหัสของคุณหรือคุณคิดถึงเรื่องนั้นต้องการที่ถูกแก้ไข นี่คำตอบคือเหมือนกันกับที่หลังหนึ่งคุณยอมรับว่าดังนั้นบางทีอาจมีบางอย่างแก้ไขตัวมันเองในท้องถิ่นของคุณพัฒนาการเซิร์ฟเวอร์อยู่ในชั่วโมงระหว่างคำตอบ
Drew Reese

ในภาษาอื่นๆ

หน้านี้อยู่ในภาษาอื่นๆ

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................

ดังอยู่ในนี้หมวดหมู่

ดังคำถามอยู่ในนี้หมวดหมู่