ReactJS: [Home] não é um <Rota> componente. Todos os componentes de crianças de <Rotas> deve ser um <Rota> ou <Reagir.Fragmento>

0

Pergunta

Eu estou tentando navegue até "/teste" quando Iniciar o Quiz botão é clicado.

No entanto, quando eu compilo meu código eu estou recebendo o seguinte erro no site do aplicativo: [Home] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

Eu sou novo para reagir e se alguém puder me ajudar eu ficaria muito grato!

Aqui é o meu código para 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;

Aqui é o meu código para 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;

Eu só tenho de código vazio dentro Quiz.js no momento.

2

Melhor resposta

2

primeiro de tudo, verifique a versão do Seu reagem roteador Dom .Este erro aparece quando você tiver V6 de reagir-roteador-dom. V6 tem muitos mudança inovadora de modo a tentar ler a documentação oficial confira:https://reacttraining.com/blog/react-router-v6-pre/ Agora, para a sua parte da pergunta Reagir roteador v6 introduzir Rotas

A Introdução De Rotas

Uma das alterações mais importantes no v6 é o novo e poderoso elemento. Este é um muito significativo de atualização a partir v5 do elemento com alguns novos recursos importantes, incluindo em relação roteamento e vinculação automática de rota de classificação, e aninhados rotas e layouts.

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

Confira também o guia de migração de v5 para 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

Muito obrigado por sua resposta, ele funciona perfeitamente bem!
dojomaker

salem É normal que eu não estou recebendo minha imagem de plano de fundo quando eu clicar no botão direito? Desculpe se for uma pergunta idiota.
dojomaker

eu posso responder a isso olhando seu código .compartilhar outra pergunta
salik saleem

este é o meu principal código, e eu tenho 2 outros arquivos de cabeçalho e rodapé, mas eu não acho que eles são necessários. Você pode ajudar com base nesses arquivos ou fazer você precisa vê-las?
dojomaker
1

Apenas Route ou React.Fragment podem ser filhos do Routes componente, e vice-versa. Você já está renderizando um Home componente sobre o "/" o caminho, para remover os estranhos <Home /> componente. Parece que você também está usando o react-router-dom v6, de modo a Route componentes não se render componentes através de um render ou component prop, eles agora processar componentes como JSX no element prop.

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

para

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

Obrigado pela sua resposta! Se eu usar o seu código é compilado sem erros, mas lança uma página vazia. Ele não lançar meu home.js código. Você tem alguma idéia de qual poderia ser este o caso? Se você puder ajudar eu seria muito feliz!
dojomaker

@dojomaker Não tiver certeza, não poderia ser algo mais acontecendo em seu código, ou você perdeu uma coisa que precisava ser corrigido. Esta resposta é o mesmo como um outro, posterior, você aceita que, então, talvez, algo corrigido em si localmente no seu servidor de desenvolvimento em hora entre as respostas.
Drew Reese

Em outros idiomas

Esta página está em outros idiomas

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