title: Page is not rendering in reactjs
body: <p>I am trying to get the pages by using URL but components are not rendered in the browser even I am not getting the error. So it's very hard to resolve the error.
  Please Help me to get the issue.</p>
  
  <pre><code>    import React, { Component } from 'react';
  import { BrowserRouter as Router} from 'react-router-dom';
  import Route from 'react-router-dom/Route';
  
  class ToDoApp extends Component {
      render() {
          return (
              &lt;Router&gt;
                  &lt;div className="ToDoApp"&gt;
                      &lt;Route path="/" exact strict Component={Index} /&gt;
                      &lt;Route path="/welcome" exact strict Component={WelcomePage} /&gt;
                      &lt;Route path="/login" exact strict Component={Login} /&gt;
                  &lt;/div&gt;
              &lt;/Router&gt;
          );
      }
  }
  
  class Index extends Component {
      render() {
          return (&lt;div&gt;&lt;h1&gt;Welcome&lt;/h1&gt;&lt;/div&gt;);
      }
  }
  
  class WelcomePage extends Component {
      render() {
          return (
              &lt;div&gt;
                  Welcome Page
              &lt;/div&gt;
          );
      }
  }
  
  class Login extends Component {
  
      constructor(props) {
          super(props);
  
          this.state = {
              username: 'Ganesh',
              password: '',
              hasLoginFailed: false,
              showSucessMessage: false
          }
  
          this.handleChange = this.handleChange.bind(this);
          this.loginCheck = this.loginCheck.bind(this);
      }
  
      handleChange(event) {
          this.setState({
              [event.target.name]: event.target.value // for declaring variable we use []
          })
      }
  
      loginCheck() {
          if (this.state.username === "Ganesh" &amp;&amp; this.state.password === 'admin') {
              console.log('successful');
              this.setState({ showSucessMessage: true, hasLoginFailed: false })
          } else {
              console.log('failed');
              this.setState({ hasLoginFailed: true, showSucessMessage: false })
          }
      }
  
      render() {
          return (
              &lt;div&gt;
  
                  {/* True &amp;&amp; 'String Value' -&gt; String Value
                      False &amp;&amp;  'String Value' -&gt; false */}
                  {this.state.hasLoginFailed &amp;&amp; &lt;div&gt;Invalid Login&lt;/div&gt;}
                  {this.state.showSucessMessage &amp;&amp; &lt;div&gt;Valid Login&lt;/div&gt;}
  
                  UserName : &lt;input type="text" name="username" value={this.state.username} onChange={this.handleChange} /&gt;
                  Password : &lt;input type="password" name="password" value={this.state.password} onChange={this.handleChange} /&gt;
                  &lt;button onClick={this.loginCheck}&gt;Login&lt;/button&gt;
              &lt;/div&gt;
          )
      }
  
  }
  
  export default ToDoApp
  </code></pre>
  
  <p>if I put localhost:3000/login -> Login Component should be displayed
  if I put localhost:3000/welcome -> WelcomePage Component should be displayed</p>
  
  <p>But now I am getting the blank page</p>