title: How to I prevent user from accessing the page of my react app directly by entering the URL, and redirect them back to login page
body: <p>I am creating a react-app. It is a website to keep track of some storage data.
  currently I am trying to protect the routes so that the users can't just access it by entering the url of the page and access it directly.</p>
  
  <p>I have seen some tutorial that uses Protected routes but I do not know how to implement it.</p>
  
  <p>My login.js</p>
  
  <pre><code>import React, { Component } from 'react'
  import { login } from './UserFunctions'
  
  class Login extends Component {
      constructor() {
          super()
          this.state = {
              email: '',
              password: ''
          }
  
          this.onChange = this.onChange.bind(this)
          this.onSubmit = this.onSubmit.bind(this)
      }
  
      onChange(e) {
          this.setState({ [e.target.name]: e.target.value })
      }
  
      onSubmit(e) {
          e.preventDefault()
  
          const user = {
              email: this.state.email,
              password: this.state.password
          }
  
          login(user).then(res =&gt; {
              if (res) {
                  this.props.history.push(`/profile`)
              }
          })
      }
  
  
      render(props) {
          return (
              &lt;div className="container"&gt;
                  &lt;div className="row"&gt;
                      &lt;div className="col-md-6 mt-5 mx-auto"&gt;
                          &lt;form noValidate onSubmit={this.onSubmit}&gt;
                              &lt;h1 className="h3 mb-3 font-weight-normal"&gt;Please sign in&lt;/h1&gt;
                              &lt;div className="form-group"&gt;
                                  &lt;label htmlFor="email"&gt;Email Address&lt;/label&gt;
                                  &lt;input type="email"
                                      className="form-control"
                                      name="email"
                                      placeholder="Enter Email"
                                      value={this.state.email}
                                      onChange={this.onChange}
                                  /&gt;
                              &lt;/div&gt;
                              &lt;div className="form-group"&gt;
                                  &lt;label htmlFor="password"&gt;Password&lt;/label&gt;
                                  &lt;input type="password"
                                      className="form-control"
                                      name="password"
                                      placeholder="Enter Password"
                                      value={this.state.password}
                                      onChange={this.onChange}
                                  /&gt;
                              &lt;/div&gt;
                              &lt;button type="submit"
                                  className="btn btn-lg btn-primary btn-block"&gt;
                                  Sign in
                              &lt;/button&gt;
                          &lt;/form&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default Login
  </code></pre>
  
  <p>My app.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import { BrowserRouter as Router, Route, Link, Redirect, withRouter } from 'react-router-dom'
  import { Home } from './appcomponents/Home';
  import { Stockin } from './appcomponents/Stockin';
  import { Stockout } from './appcomponents/Stockout';
  import { Asrsstock } from './appcomponents/ASRSstock';
  import { Productinfo } from './appcomponents/Productinfo';
  import { Productin } from './appcomponents/Productin';
  import { Productout } from './appcomponents/Productout';
  import { Stockreport } from './appcomponents/Stockreport';
  import { Enrolling } from './appcomponents/Enrolling';
  import { NoMatch } from './appcomponents/NoMatch';
  //import { NavigationBar } from './components/NavigationBar';
  import { Deleteuser } from './appcomponents/Deleteuser';
  import decode from 'jwt-decode';
  
  import Navigationbar from './components/Navbar'
  import Landing from './components/Landing'
  import Login from './components/Login'
  import Register from './components/Register'
  import Profile from './components/Profile'
  
  function requireAuth(nextState, replace) {
    if (!loggedIn()) {
      replace({
        pathname: '/login'
      })
    }
  }
  
  
  class App extends Component {
    render() {
      return (
        &lt;Router&gt;
          &lt;div className="App"&gt;
            &lt;Navigationbar /&gt;
            &lt;Route exact path="/" component={Landing} /&gt;
            &lt;div className="container"&gt;
              &lt;Route exact path="/register" component={Register} /&gt;
              &lt;Route exact path="/login" component={Login} /&gt;
              &lt;Route exact path="/profile" component={Profile} /&gt;
              &lt;Route exact path="/Home" component={Home} /&gt;
              &lt;Route path="/Stockin" component={Stockin} /&gt;
              &lt;Route path="/Stockout" component={Stockout} /&gt;
              &lt;Route path="/Asrsstock" component={Asrsstock} /&gt;
              &lt;Route path="/Productinfo" component={Productinfo} /&gt;
              &lt;Route path="/Productin" component={Productin} /&gt;
              &lt;Route path="/Productout" component={Productout} /&gt;
              &lt;Route exact path="/Stockreport" component={Stockreport} onEnter={requireAuth} /&gt;
              &lt;Route path="/Enrolling" component={Enrolling} /&gt;
              &lt;Route path="/Deleteuser" component={Deleteuser} /&gt;
              &lt;Route exact path="/Register" component={Register} /&gt;
              &lt;Route component={NoMatch} /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/Router&gt;
      );
    }
  }
  
  export default App;
  
  </code></pre>
  
  <p>I want to be able to redirect unauthorized user to login page. So that the only way for them to access the protected pages is login in</p>