title: My React Component is rendering twice and then getting redirected to homepage
body: <p>I am learning reactjs and creating a test quiz project with it. The plan is only logged-in users will be able to access a quiz.</p>
  <p>I am using react-router. When I have already accessed the website and then accessing different pages, it's not causing any problem. but when I am trying to access a route directly, the component of that route is rendering twice and then getting redirected to the home page. To clarify the situation with an example, I have a route /quiz. when I visit http://localhost:3000/quiz directly in the browser, it prints the following message in the console.</p>
  <pre><code>[HMR] Waiting for update signal from WDS...
  Quiz.js:10 Quiz rendered
  Quiz.js:10 Quiz rendered
  app.js:5 works
  </code></pre>
  <p>then I am being redirected to http://localhost:3000/.</p>
  <p>So, my problems are:</p>
  <ul>
  <li>I am getting rendered twice</li>
  <li>I am being redirected.</li>
  </ul>
  <p>I have attached the route and quiz component here. What is causing the issue?</p>
  <p>Routes.js</p>
  <pre><code>import React, {useState} from 'react'
  import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
  import Home from '../public_page_components/Home'
  import About from '../public_page_components/About'
  import SearchPage from '../product_search_components/SearchPage'
  import NoMatch from '../public_page_components/NoMatch'
  import MyNav from './MyNav'
  import Todo from '../public_page_components/Todo'
  import Quiz from '../public_page_components/Quiz'
  import Footer from '../public_page_components/Footer'
  
  
  export default function Routes(props) {
      var isSigned = localStorage.getItem('scs_user_logged_in') ? true : false
      const [signedIn, setSignedIn] = useState(isSigned)
  
  
      return (
          &lt;Router&gt;
              &lt;MyNav signedIn={signedIn} setSignedIn={setSignedIn} search_item={props.search_item} setSearchItem={props.setSearchItem}/&gt;
              &lt;Switch&gt;
                  &lt;Route path='/' exact&gt;
                      &lt;Home  search_item={props.search_item} setSearchItem={props.setSearchItem} /&gt;
                  &lt;/Route&gt;
                  &lt;Route path='/about' exact component={About} /&gt;
                  &lt;Route path='/search/:search_term' children={&lt;SearchPage   search_item={props.search_item} setSearchItem={props.setSearchItem}/&gt;} /&gt;
                  &lt;Route path=&quot;/todo&quot; exact&gt;
                      &lt;Todo/&gt;
                  &lt;/Route&gt;
                  &lt;Route path=&quot;/quiz&quot; exact&gt;
                      &lt;Quiz signedIn={signedIn} setSignedIn={setSignedIn}/&gt;
                  &lt;/Route&gt;
                  &lt;Route path=&quot;*&quot; component={NoMatch} /&gt;
                  
              &lt;/Switch&gt;
              &lt;Footer/&gt;
          &lt;/Router&gt;
      )
  }
  </code></pre>
  <p>Quiz.js</p>
  <pre><code>import React from 'react'
  import Button from 'react-bootstrap/Button'
  import Row from 'react-bootstrap/Row'
  import Col from 'react-bootstrap/Col'
  
  
  
  export default function Quiz(props) {
  
      console.log('Quiz rendered')
  
      let quiz_menu = props.signedIn ? &lt;div style={{textAlign:&quot;right&quot;}}&gt;Logged in&lt;/div&gt; : &quot;not logged in&quot;
  
      return (
          &lt;&gt;
              &lt;div style={{minHeight:&quot;80vh&quot;}}&gt;
              &lt;Row&gt;
                  &lt;Col&gt;
                      &lt;h1&gt;
                          Quiz
                      &lt;/h1&gt;
                  &lt;/Col&gt;
                  &lt;Col style={{display:&quot;flex&quot;, alignItems:&quot;center&quot;}}&gt;
                  {quiz_menu}
                  &lt;/Col&gt;
              &lt;/Row&gt;
              &lt;Row style={{margin:&quot;5px 0px&quot;}}&gt;
                  &lt;Col xs={9} style={{backgroundColor:&quot;blue&quot;}}&gt;
                  test
                  &lt;/Col&gt;
                  &lt;Col xs={3} style={{backgroundColor:&quot;red&quot;}}&gt;
                      test
                  &lt;/Col&gt;
              &lt;/Row&gt;
              &lt;/div&gt;
  
              
          &lt;/&gt;
  
  
      )
  }
  </code></pre>
  <p>MyNav.js</p>
  <pre><code>import React from 'react'
  import Nav from 'react-bootstrap/Nav'
  import Navbar from 'react-bootstrap/Navbar'
  // import NavDropdown from 'react-bootstrap/NavDropdown'
  import { Link } from 'react-router-dom'
  import Searchfield from '../product_search_components/Searchfield'
  import LoginSignout from '../login_components/LoginSignout'
  import MenuButtons from './MenuButtons'
  
  export default function MyNav(props) {
      
      var menu = props.signedIn ? &lt;LoginSignout  setSignedIn={props.setSignedIn}/&gt; : &lt;MenuButtons setSignedIn={props.setSignedIn}/&gt;
  
      return (
          &lt;Navbar bg=&quot;dark&quot; variant=&quot;dark&quot; expand=&quot;lg&quot;&gt;
              &lt;Navbar.Brand&gt;&lt;span style={{ fontWeight: 'bold' }}&gt;Test&lt;/span&gt;&lt;/Navbar.Brand&gt;
  
              &lt;Navbar.Toggle aria-controls=&quot;basic-navbar-nav&quot; /&gt;
              &lt;Navbar.Collapse id=&quot;basic-navbar-nav&quot;&gt;
                  &lt;Nav className=&quot;mr-auto&quot;&gt;
                      &lt;Link className='nav-link' to=&quot;/&quot;&gt;Home&lt;/Link&gt;
                      &lt;Link className='nav-link' to=&quot;/about&quot;&gt;About&lt;/Link&gt;
                      &lt;Link className='nav-link' to=&quot;/todo&quot;&gt;Todo&lt;/Link&gt;
                      &lt;Link className='nav-link' to=&quot;/quiz&quot;&gt;Quiz&lt;/Link&gt;
  
  
                      {/* &lt;NavDropdown title=&quot;Dropdown&quot; id=&quot;basic-nav-dropdown&quot;&gt;
                          &lt;NavDropdown.Item&gt;Action&lt;/NavDropdown.Item&gt;
                          &lt;NavDropdown.Item&gt;Another action&lt;/NavDropdown.Item&gt;
                          &lt;NavDropdown.Item&gt;Something&lt;/NavDropdown.Item&gt;
                          &lt;NavDropdown.Divider /&gt;
                          &lt;NavDropdown.Item&gt;Separated link&lt;/NavDropdown.Item&gt;
                      &lt;/NavDropdown&gt; */}
                  &lt;/Nav&gt;
  
              &lt;/Navbar.Collapse&gt;
              &lt;Searchfield search_item={props.search_item} setSearchItem={props.setSearchItem} /&gt;
              {menu}
  
          &lt;/Navbar&gt;
      )
  }
  </code></pre>