title: can I create a custom route without using redux?
body: <p>I have a Loginscreen.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import Login from './Login';
  
  class Loginscreen extends Component {
    constructor(props){
      super(props);
      this.state={
        username:'',
        password:'',
        loginscreen:[],
        loginmessage:'',
        isLogin:true
      }
    }
    componentWillMount(){
      var loginscreen=[];
      loginscreen.push(&lt;Login parentContext={this} appContext={this.props.parentContext}/&gt;);
      this.setState({
                    loginscreen:loginscreen
                      })
    }
    render() {
      return (
        &lt;div className="loginscreen"&gt;
          {this.state.loginscreen}
        &lt;/div&gt;
      );
    }
  }
  const style = {
    margin: 15,
  };
  export default Loginscreen;
  </code></pre>
  
  <p>and I have Login.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Button, Form, Grid, Segment } from 'semantic-ui-react'
  import axios from 'axios';
  import validator from 'Validator';
  import InlineError from './components/messages/InlineError';
  import UploadScreen from './UploadScreen';
  import { BrowserRouter as Router, Route } from 'react-router-dom';
  
  class Login extends Component {
  constructor(){
    super();
    this.state={
      email:'',
      password:'',
      errors: {}
    }
   }
  
   onChange = (e) =&gt; {
    this.setState({ [e.target.name]: e.target.value });
   }
  
   validate = () =&gt; {
     if (!this.state.password) this.state.errors.password = "Can't be blank";
     if (!this.state.email) this.state.errors.email = "Invalid Email";
     return this.state.errors;
   }
   onSubmit = (e) =&gt; {
    const errors = this.validate(this.state);
    this.setState({ errors });
    e.preventDefault();
    var apiBaseUrl = "http://127.0.0.1:8000/api/auth/login";
    var self = this;
    var payload={
        "email":this.state.email,
        "password":this.state.password
    }
    var config = {
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      withCredentials: false
    }
  
    axios.post(apiBaseUrl, payload, config)
    .then(function (response) {
      console.log(response);
      if(response.status == 200){
          console.log("Login successful");
      }
      else if(response.status == 204){
          console.log("Username password do not match");
          alert("username password do not match")
      }
      else{
          console.log("Username does not exists");
          alert("Username does not exist");
      }
  })
  .catch(function (error) {
  console.log(error);
  });
  }
  
  render() {
        const { email, password, errors } = this.state;
      return (
        &lt;div className='login-form'&gt;
        &lt;style&gt;{`
          body &gt; div,
          body &gt; div &gt; div,
          body &gt; div &gt; div &gt; div.login-form {
            height: 100%;
          }
        `}&lt;/style&gt;
        &lt;Grid textAlign='center' style={{ height: '100%' }} verticalAlign='middle'&gt;
          &lt;Grid.Column style={{ maxWidth: 450 }}&gt;
          &lt;br /&gt;
          &lt;br /&gt;
            &lt;Form size='large' onSubmit={this.onSubmit}&gt;
              &lt;Segment stacked&gt;
                &lt;Form.Input 
                type='text'
                name='email'
                value={email}
                onChange={this.onChange}
                fluid 
                icon='user' 
                iconPosition='left' 
                placeholder='E-mail address' 
                /&gt;
                { errors.email &amp;&amp; &lt;InlineError text={errors.email} /&gt;}
                &lt;Form.Input
                type='password'
                name='password'
                value={password}
                onChange={this.onChange}              
                fluid
                icon='lock'
                iconPosition='left'
                placeholder='Password'
                /&gt;
                { errors.password &amp;&amp; &lt;InlineError text={errors.password} /&gt;}
                &lt;Button fluid size='large' type="submit"&gt;
                  Login
                &lt;/Button&gt;
              &lt;/Segment&gt;
            &lt;/Form&gt;
          &lt;/Grid.Column&gt;
        &lt;/Grid&gt;
      &lt;/div&gt;
    );
    }
  }
  const style = {
   margin: 15,
  };
  export default Login;
  </code></pre>
  
  <p>that returns: </p>
  
  <p><a href="https://i.stack.imgur.com/qKg8f.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qKg8f.png" alt="enter image description here"></a></p>
  
  <p>can I use this response alone to be able to create a conditional statement that would create a custom route that can only be accessed if someone is logged in successfully?</p>
  
  <p>this is my <code>app.js</code></p>
  
  <pre><code>import React from 'react';
  import { Route } from 'react-router-dom';
  import LoginPage from "./Login";
  import UploadScreen from "./UploadScreen";
  
  const App = () =&gt; (
  &lt;div className="ui container"&gt; 
    &lt;Route path="/" exact component={LoginPage} /&gt;
    &lt;Route path="/upload" exact component={UploadScreen} /&gt;
  &lt;/div&gt;
  );
  export default App;
  </code></pre>
  
  <p>I want that "/upload" route to only be accessible if someone is logged in. can I do that?</p>