ReactJS: [Domů] není <Trasy> složka. Všechny součásti, děti <Trasy> musí být v <Cesta> nebo <Reagovat.Fragment>

0

Otázka

Snažím se orientovat na "kvíz", kdy Začít Kvíz kliknutí na tlačítko.

Nicméně, když jsem sestavit svůj kód jsem dostat následující chybu na webových stránkách aplikace: [Home] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

Jsem nový na to reagovat a jestli někdo mi může pomoci, byl bych vděčný!

Tady je můj kód pro 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;

Tady je můj kód pro 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;

Mám jen prázdný kód uvnitř Quiz.js v okamžiku, kdy.

2

Nejlepší odpověď

2

nejprve zkontrolujte verzi Vašeho reagovat router Dom .Tato chyba se objeví, když máte V6 react-router-dom. V6 mají mnoho převratných změn a tak se snaží přečtěte si oficiální dokumentaci podívejte se na to:https://reacttraining.com/blog/react-router-v6-pre/ Nyní za otázku část Reagovat router v6 představit Trasy

Představujeme Trasy

Jedním z nejvíce vzrušujících změn ve v6 je výkonný nový prvek. To je docela významný upgrade od v5 je prvek s některé důležité nové funkce, včetně relativní směrování a propojení, automatické trasy pořadí, a vnořené trasy a rozložení.

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

Také zkontrolujte, zda průvodce migrací z v5 na 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

Děkuji moc za vaše odpovědi, že funguje naprosto v pořádku!
dojomaker

salem Je to normální, že já jsem nedostal můj obrázek na pozadí, když jsem klepněte na tlačítko ne? Omlouvám se, jestli to je hloupá otázka.
dojomaker

mohu odpovědět tím, že při pohledu na váš kód .podělte se o další otázku
salik saleem

to je můj hlavní kód, a mám 2 další soubory pro záhlaví a zápatí, ale nemyslím si, že jsou potřeba. Můžete mi pomoci na základě těchto souborů, nebo potřebujete vidět?
dojomaker
1

Pouze Route nebo React.Fragment jsou povoleny pro děti Routes součásti, a vice-versa. Jste již vykreslování Home složku na "/" cestu, a tak odstranit cizí <Home /> komponenta. Zdá se také používáte react-router-dom v6, takže Route komponenty již vykreslení komponent přes render nebo component prop, nyní vykreslení komponenty jako JSX na element prop.

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

k

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

Děkuji za vaši odpověď! Mám-li použít tvůj kód zkompiluje bez chyb, ale to spustí prázdná stránka. To není můj spuštění home.js kód. Máte ponětí, proč by tomu tak mohlo být? Pokud můžete pomoci, budu opravdu šťastná!
dojomaker

@dojomaker nejste si jisti, mohl by tam být ještě něco jiného se děje ve vašem kódu, nebo jste vynechal věci, které je třeba opravit. Tato odpověď je stejná jako později přijal jsi i když, takže možná něco opravil sám lokálně na vašem development server v hodině mezi odpovědi.
Drew Reese

V jiných jazycích

Tato stránka je v jiných jazycích

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