title: ReactJS: [Home] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
body: <p>I am trying to navigate to  &quot;/quiz&quot; when Start Quiz button is clicked.</p>
  <p>However when I compile my code I am getting the following error on the website application: <code>[Home] is not a &lt;Route&gt; component. All component children of &lt;Routes&gt; must be a &lt;Route&gt; or &lt;React.Fragment&gt;</code></p>
  <p>I am new to react and if anyone can help me I would be grateful!</p>
  <p>Here is my code for App.js:</p>
  <pre><code>import { BrowserRouter, Routes, Route } from &quot;react-router-dom&quot;;
  import Footer from &quot;./components/Footer/Footer&quot;;
  import Header from &quot;./components/Header/Header&quot;;
  import Home from &quot;./Pages/Home/Home&quot;;
  import Quiz from &quot;./Pages/Quiz/Quiz&quot;;
  import &quot;./App.css&quot;;
  function App() {
    return (
      &lt;BrowserRouter&gt;
        &lt;div className=&quot;App&quot; style={{ backgroundImage: &quot;url(./circle.jpg)&quot; }}&gt;
          &lt;Header /&gt;
          &lt;Routes&gt;
            &lt;Route exact path=&quot;/&quot; component={Home} /&gt;
            &lt;Route path=&quot;/quiz&quot; component={Quiz} /&gt;
            &lt;Home /&gt;
          &lt;/Routes&gt;
        &lt;/div&gt;
        &lt;Footer /&gt;
      &lt;/BrowserRouter&gt;
    );
  }
  
  export default App;
  
  </code></pre>
  <p>Here is my code for Home.js:</p>
  <pre><code>import { Button } from &quot;@material-ui/core&quot;;
  import { Container } from &quot;@material-ui/core&quot;;
  import { useNavigate } from &quot;react-router-dom&quot;;
  import &quot;./Home.css&quot;;
  
  const Home = () =&gt; {
    const navigate = useNavigate();
  
    const sendSubmit = () =&gt; {
      navigate(&quot;/quiz&quot;);
    };
    return (
      &lt;Container className=&quot;content&quot;&gt;
        &lt;h1 id=&quot;quiz-title&quot;&gt;Phishing Quiz&lt;/h1&gt;
        &lt;h2 class=&quot;question-text&quot;&gt;
          Do you think you can beat our phishing quiz?
        &lt;/h2&gt;
        &lt;p className=&quot;description&quot;&gt;
          {&quot; &quot;}
          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.
        &lt;/p&gt;
        &lt;p className=&quot;description&quot;&gt;
          Do you think you are smart enough to handle these attacks?
        &lt;/p&gt;
        &lt;p className=&quot;description&quot;&gt;
          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!
        &lt;/p&gt;
        &lt;p&gt;&quot;&quot;&lt;/p&gt;
        &lt;Button
          variant=&quot;contained&quot;
          color=&quot;primary&quot;
          size=&quot;large&quot;
          onClick={sendSubmit}
        &gt;
          Start Quiz
        &lt;/Button&gt;
      &lt;/Container&gt;
    );
  };
  
  export default Home;
  
  </code></pre>
  <p>I only have empty code inside Quiz.js at the moment.</p>