title: React router multiple <Switch>
body: <p>I'm using <code>"react-router-dom": "^4.3.1",</code>, <code>"@material-ui/core": "^3.9.2",</code></p>
  
  <p>I got router.ts which has Route, Switch and <code>MainPage</code> component.</p>
  
  <p>router.ts</p>
  
  <pre class="lang-js prettyprint-override"><code>      &lt;HashRouter&gt;
          &lt;div id="App"&gt;
            &lt;Appbar /&gt;
            &lt;Switch&gt;
              &lt;Route exact path="/" component={MainPage} /&gt;
              &lt;Route exact path="/signup" component={SignupPage} /&gt;
              &lt;Route exact path="/signup/success" component={SignupSuccessPage} /&gt;
              &lt;Route exact path="/room/:id" component={NovelPage} /&gt;
              &lt;Route component={NotfoundPage} /&gt;
            &lt;/Switch&gt;
          &lt;/div&gt;
        &lt;/HashRouter&gt;
  </code></pre>
  
  <p>And I got <code>MainPage</code> component which has Route and Switch</p>
  
  <pre class="lang-js prettyprint-override"><code>          &lt;AppBar position="static"&gt;
              &lt;Tabs
                variant="fullWidth"
                value={this.state.value}
                indicatorColor="primary"
                textColor="primary"
              &gt;
                    &lt;Tab
                      label={"latest_novel"}
                      onChange={this.handleTabsChange(`/latest/novel`, 0)}
                    /&gt;
                    &lt;Tab
                      label={"create novel"}
                      onChange={this.handleTabsChange(`/create/room`, 1)}
                    /&gt;
              &lt;/Tabs&gt;
              &lt;Switch&gt;
                &lt;Route exact path={`${this.props.match.url}/latest/novel`} component={TodayNovelPage} /&gt;
                &lt;Route exact path={`${this.props.match.url}/create/room`} component={CreateRoomPage} /&gt;
              &lt;/Switch&gt;
            &lt;/AppBar&gt;
  </code></pre>
  
  <p>I expected</p>
  
  <ol>
  <li><p>When I click Mainpage's Tab component then, page url is changed like "localhost:3000/latest/novel" and page is moved.</p></li>
  <li><p>When page is moved then it shows under MainPage's Switch</p></li>
  </ol>
  
  <p>But, when I tried it.</p>
  
  <p>Page is moved but, Tabs is disappears and it seemed shows under the router.ts not Mainpage. Why is it?</p>
  
  <p><a href="https://i.stack.imgur.com/cxmlf.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cxmlf.gif" alt="enter image description here"></a>
  Please let me know if you need more info.</p>
  
  <p>Thanks.</p>