title: How to render different Layouts in React?
body: <p>I am trying to show different Layouts using React. I have Navbar with links. For every links (Service, Works, Contact...etc) I want to render Navbar, but for SignIn link I don't want to show it. So my code is following:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { BrowserRouter, Route, Switch } from 'react-router-dom';
  import PublicLayout from './components/layouts/PublicLayout';
  import SigninLayout from './components/layouts/SigninLayout';
  import Main from './components/pages/Main';
  import Services from './components/pages/Services';
  import Price from './components/pages/Price';
  import Works from './components/pages/Works';
  import Signin from './components/pages/Signin';
  import NotFound from './components/pages/NotFound';
  
  class App extends Component {
      render() {
          return (
              &lt;BrowserRouter&gt;
                  &lt;div className="App"&gt;
                      &lt;Switch&gt;
                          &lt;PublicLayout&gt;
                              &lt;Route exact path='/' component={Main} /&gt;
                              &lt;Route exact path='/services' component={Services} /&gt;
                              &lt;Route exact path='/prices' component={Price} /&gt;
                              &lt;Route exact path='/works' component={Works} /&gt;
                          &lt;/PublicLayout&gt;
                          &lt;SigninLayout&gt;
                              &lt;Route exact path='/signin' component={Signin} /&gt;
                          &lt;/SigninLayout&gt;
                          &lt;Route path="*" component={NotFound} /&gt;
                      &lt;/Switch&gt;
                  &lt;/div&gt;
              &lt;/BrowserRouter&gt;
          );
      }
  }
  
  export default App;
  </code></pre>
  
  <p>I expect that SigninLayout should use for SignIn url. But I still see Navbar instead. This is my SigninLayout code:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class SigninLayout extends Component {
      state = {
  
      }
  
      render() {
          return (
              &lt;div&gt;
                  { this.props.children }
              &lt;/div&gt;
          );
      }
  }
  
  export default SigninLayout;
  </code></pre>
  
  <p>And this is my SignIn component:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class Signin extends Component {
      state = {
  
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;h1&gt;Войти&lt;/h1&gt;
                  &lt;form&gt;
                      &lt;input type="text" placeholder="укажите e-mail" /&gt;
                      &lt;input type="text" placeholder="укажите пароль" /&gt;
                      &lt;button&gt;Войти&lt;/button&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default Signin;
  </code></pre>
  
  <p>Why the Navbar is showing? What I'm doing wrong?</p>
  
  <p><strong>UPD:</strong> </p>
  
  <pre><code>import React, { Component } from 'react';
  import Navbar from '../nav/Navbar';
  
  class PublicLayout extends Component {
      state = {
          items: [
              { id: 1, name: 'Услуги', link: '/services' },
              { id: 2, name: 'Цены', link: '/prices' },
              { id: 3, name: 'Как это работает?', link: '/works' },
              { id: 4, name: 'Войти', link: '/signin' },
          ]
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;Navbar items={ this.state.items } /&gt;
                  { this.props.children }
              &lt;/div&gt;
          );
      }
  }
  
  export default PublicLayout;
  </code></pre>