title: How to stop loading components in single page applications made in react once the server is terminated?
body: <p>So I have a login container and a student container. If login button is clicked, Student container is loaded. Student component further displays Dashboard. I have used React router to give routes. My problem is that if I terminate the server and reload the page it won't load which is required but if I click any other links in the page instead of reloading, respective components are displayed which I don't want. How can I solve this?</p>
  
  <p>Folder structure:</p>
  
  <p><a href="https://i.stack.imgur.com/icxo6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/icxo6.png" alt="Folder Structure"></a></p>
  
  <p>App.js</p>
  
  <pre><code>class App extends Component {
  
    state = {
      loggedIn: false,
      username: null,
      password: null,
    }
  
    loginHandler = (loggedIn, username, password) =&gt; {
  
      console.log("hi");
      this.setState({ loggedIn: loggedIn });
      this.setState({ loggedIn: loggedIn, username: username, password: password });
    }
  
  
    render() {
  
      console.log('hi vidhi');
      console.log(this.state);
  
      if (this.state.loggedIn) {
        return (
          &lt;div&gt;
            &lt;Route path='/dashboard' component={Student} /&gt;
            &lt;Route path='/' exact component={() =&gt; &lt;Login loginHandler={this.loginHandler} /&gt;} /&gt;
          &lt;/div&gt;
        )
      }
      else {
        return (
          &lt;div&gt;
            &lt;Route path='/' exact component={() =&gt; &lt;Login loginHandler={this.loginHandler} /&gt;} /&gt;
            &lt;Route path='/dashboard' component={Invalid} /&gt;
          &lt;/div&gt;
        );
      }
    }
  }
  </code></pre>
  
  <p>Student.js</p>
  
  <pre><code>class Student extends Component{
  
      drawerList = {'My Profile':'profile', 'News Feed':'news'}
  
      render(){
          return(
              &lt;div&gt;
                  &lt;Layout drawerList={this.drawerList}&gt;
                      &lt;Route path='/dashboard/profile' component={Profile} /&gt;
                      &lt;Route path='/dashboard/news' component={News} /&gt;
                  &lt;/Layout&gt;
              &lt;/div&gt;
          )
      }
  
  }
  </code></pre>
  
  <p>Login.js</p>
  
  <pre><code>class Login extends Component {
  
    state = {
      loggedIn: false,
      username: '',
      password: '',
    }
  
    loginHandler = (event) =&gt; {
      event.preventDefault();
      this.setState({ loggedIn: true, });
    }
  
    changeHandler = name =&gt; event =&gt; {
      let newState = { ...this.state, [name]: event.target.value };
      this.setState(newState);
    }
  
    render() {
      if (this.state.loggedIn) {
        this.props.loginHandler(this.state.loggedIn, this.state.username, this.state.password);
        console.log(this.props);
        this.props.history.push('/dashboard');
      }
      return (
        &lt;Container component="main" maxWidth="xs"&gt;
          &lt;CssBaseline /&gt;
          &lt;div className={classes.paper}&gt;
            &lt;Avatar className={classes.avatar}&gt;
              &lt;LockOutlinedIcon /&gt;
            &lt;/Avatar&gt;
            &lt;Typography component="h1" variant="h5"&gt;
              Sign in
            &lt;/Typography&gt;
            &lt;form onSubmit={this.loginHandler} className={classes.form} noValidate&gt;
              &lt;TextField
                variant="outlined"
                margin="normal"
                required
                fullWidth
                id="standard-name"
                label="Name"
                name="name"
                autoComplete="name"
                autoFocus
                onChange={this.changeHandler('username')}
              /&gt;
              &lt;TextField
                variant="outlined"
                margin="normal"
                required
                fullWidth
                name="password"
                label="Password"
                type="password"
                id="password"
                autoComplete="current-password"
                onChange={this.changeHandler('password')}
              /&gt;
              &lt;FormControlLabel
                control={&lt;Checkbox value="remember" color="primary" /&gt;}
                label="Remember me"
              /&gt;
              &lt;Button
                type="submit"
                fullWidth
                variant="contained"
                color="primary"
                className={classes.submit}
              &gt;
                Sign In
              &lt;/Button&gt;
            &lt;/form&gt;
          &lt;/div&gt;
          &lt;Box mt={5}&gt;
          &lt;/Box&gt;
        &lt;/Container&gt;
      )
    }
  }
  </code></pre>
  
  <p>So if I load the login page and then after terminating the server if I click login it shows me dashboard and all the dashboard links are also working. How can I prevent this?</p>
  
  <p>Any help would be wonderful.</p>
  
  <p>Thanks for your time.</p>