ReactJS: [Home] bir < Route> bileşeni değildir. <Routes> öğesinin tüm bileşen alt öğeleri bir <Routes> <Route>veya<Route> olmalıdırParça>

0

Soru

Sınavı Başlat düğmesine tıklandığında "/quiz" e gitmeye çalışıyorum.

Ancak kodumu derlediğimde web sitesi uygulamasında aşağıdaki hatayı alıyorum: [Home] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

Tepki vermek için yeniyim ve eğer biri bana yardım edebilirse minnettar olurum!

İşte Uygulama için kodum.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;

İşte Ev kodum.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;

Sınavın içinde sadece boş kodum var.şu anda js.

2

En iyi cevabı

2

her şeyden önce react router Dom'unuzun sürümünü kontrol edin .Bu hata, react-router-dom V6'nız olduğunda görünür. V6'nın çığır açan birçok değişikliği var, bu yüzden resmi belgeleri okumaya çalışın şuna bakın: https: / / reacttraining. com / blog / react-router-v6-pre/ Şimdi Sorunuzun part React router v6 Rotaları Tanıtın

Rotaların Tanıtılması

V6'daki en heyecan verici değişikliklerden biri güçlü yeni eleman. Bu oldukça önemli bir yükseltmedir aşağıdakiler de dahil olmak üzere bazı önemli yeni özelliklere sahip v5 öğesinden göreli yönlendirme ve bağlama, otomatik rota sıralaması ve iç içe geçme rotalar ve düzenler.

  <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>

Ayrıca v5'ten v6'ya geçiş kılavuzunu da kontrol edin 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

Cevabınız için çok teşekkür ederim, gayet iyi çalışıyor!
dojomaker

salem Sağ tuşa tıkladığımda arka plan resmimi almamam normal mi? Aptalca bir soruysa özür dilerim.
dojomaker

bunu koduna bakarak cevaplayabilirim .başka bir soru paylaş
salik saleem

bu benim ana kodum ve üstbilgi ve altbilgi için 2 dosyam daha var ama bunların gerekli olduğunu sanmıyorum. Bu dosyalar temel yardım ya da onları görmek ister misin?
dojomaker
1

Sadece Route veya React.Fragment çocukların çocukları olmalarına izin verilir. Routes bileşen ve tam tersi. Zaten bir render yapıyorsunuz Home "/" yolda bileşen, böylece gereksiz Kaldır <Home /> bileşen. Görünüşe göre siz de kullanıyorsunuz react-router-dom v6, yani Route bileşenler artık bileşenleri bir render veya component prop, şimdi bileşenleri JSX olarak oluşturuyorlar element destek.

<Routes>
  <Route exact path="/" component={Home} />
  <Route path="/quiz" component={Quiz} />
  <Home /> // <-- remove this
</Routes>

-e doğru

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/quiz" element={<Quiz />} />
</Routes>
2021-11-23 03:20:06

Cevabınız için teşekkür ederiz! Kodunuzu kullanırsam hatasız derler, ancak boş bir sayfa başlatır. Evimi fırlatmıyor.js kodu. Peki bu durumda neden herhangi bir fikrin var mı? Yardım edersen çok mutlu olurum!
dojomaker

@dojomaker Emin değilim, kodunuzda başka bir şey olabilir veya düzeltilmesi gereken bir şeyi kaçırdınız. Ancak, bu cevap daha sonra kabul ettiğiniz ile aynıdır, bu nedenle cevaplar arasındaki bir saat içinde geliştirme sunucunuzda yerel olarak bir şeyler düzeltilebilir.
Drew Reese

Diğer dillerde

Bu sayfa diğer dillerde

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