ReactJS: [गृह] नहीं है एक <मार्ग> घटक है । सभी घटक बच्चों के <मार्गों> एक होना चाहिए <मार्ग> या <प्रतिक्रिया.टुकड़ा>

0

सवाल

मैं कोशिश कर रहा हूँ करने के लिए नेविगेट करने के लिए "/प्रश्नोत्तरी" जब स्टार्ट क्विज का बटन क्लिक किया जाता है.

हालांकि जब मैं अपने कोड संकलन मैं निम्नलिखित त्रुटि हो रही हूँ वेबसाइट पर आवेदन: [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

सब से पहले संस्करण की जाँच के अपने प्रतिक्रिया रूटर Dom .इस त्रुटि दिखाई देते हैं जब आप V6 की प्रतिक्रिया-रूटर-dom. V6 कई groundbreaking परिवर्तन तो कोशिश पढ़ने के लिए सरकारी दस्तावेज इस बाहर की जाँच करें:https://reacttraining.com/blog/react-router-v6-pre/ अब अपने प्रश्न के लिए भाग प्रतिक्रिया रूटर 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

2021-11-23 04:01:13

बहुत बहुत धन्यवाद आपकी प्रतिक्रिया के लिए यह बिल्कुल ठीक काम करता है!
dojomaker

सलेम है, यह सामान्य है कि मैं नहीं कर रहा हूँ हो रही है मेरी पृष्ठभूमि छवि जब मैं बटन पर क्लिक करें सही है? क्षमा करें यदि यह एक मूर्खतापूर्ण सवाल.
dojomaker

मैं जवाब कर सकते हैं इस पर देख द्वारा अपने कोड .साझा एक और सवाल
salik saleem

यह मेरी मुख्य कोड, और मैं 2 अन्य फ़ाइलों के लिए शीर्ष लेख और पाद लेख, लेकिन मैं नहीं लगता है कि वे कर रहे हैं की जरूरत है. आप मदद कर सकते हैं के आधार पर इन फ़ाइलों या क्या आप की जरूरत है उन्हें देखने के लिए?
dojomaker
1

केवल Route या React.Fragment रहे हैं की अनुमति दी जा करने के लिए बच्चों के Routes घटक है, और उपाध्यक्ष प्रतिकूल. आप पहले से ही एक प्रतिपादन Home घटक पर "/" पथ, तो दूर बाहरी <Home /> घटक है । यह प्रकट होता है आप का उपयोग कर रहे हैं react-router-dom v6 है, तो Route घटकों अब प्रस्तुत करना घटकों के माध्यम से एक render या component सहारा, वे अब प्रस्तुत करना घटकों के रूप में JSX पर element सहारा.

<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

आपकी प्रतिक्रिया के लिए धन्यवाद! अगर मैं का उपयोग करें अपने कोड इसे संकलित त्रुटियों के बिना, लेकिन यह शुरूआत एक खाली पृष्ठ है. यह शुरू नहीं करता है मेरी home.js कोड. क्या आप किसी भी विचार क्यों यह मामला हो सकता है? यदि आप मदद कर सकते हैं मैं वास्तव में खुश हो जाएगा!
dojomaker

@dojomaker नहीं यकीन है, वहाँ हो सकता है कुछ और पर जा रहा है, या अपने कोड में आप एक बात याद करने की जरूरत है कि सही हो. इस जवाब के रूप में ही है के बाद से एक आप स्वीकार किए जाते हैं, हालांकि, तो शायद कुछ ही सही पर स्थानीय रूप से अपने विकास सर्वर में घंटे के बीच जवाब दिया है ।
Drew Reese

अन्य भाषाओं में

यह पृष्ठ अन्य भाषाओं में है

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................

इस श्रेणी में लोकप्रिय

लोकप्रिय सवाल इस श्रेणी में