ReactJS: [Home] не является компонентом <Маршрут>. Все дочерние компоненты <Маршрутов> должны быть <Маршрутами><Маршрутом> или <Маршрутом>Фрагмент>

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

прежде всего, проверьте версию вашего маршрутизатора react Dom .Эта ошибка появляется, когда у вас есть V6 react-router-dom. В V6 есть много новаторских изменений, поэтому попробуйте прочитать официальную документацию , проверьте это:https://reacttraining.com/блог/react-маршрутизатор-v6-pre/ Теперь перейдем к вашей части вопроса Маршрутизатор React 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ý
..................................................................................................................