title: React Redirect should not use outside the router
body: <p>I am fairly new to react and I am learning myself by creating this sample app where the user tries to login with credentials, On successful, the user should redirect to the home page where I may display some data. So far I am receiving below  error </p>
  
  <blockquote>
    <p>Uncaught Error: You should not use &lt;Redirect&gt; outside a &lt;Router&gt;</p>
  </blockquote>
  
  <p>My two components look like below</p>
  
  <h1>App.js</h1>
  
  <pre><code>import React, { Component } from 'react';
  import axios from 'axios';
  import { Route, Redirect } from 'react-router';
  import Home from './Home';
  import AuthLogin from './AuthLogin';
  
  
  class App extends Component {
  
  constructor(){
      super();
      this.state = {
        username: '',
        password: '',
        userdata: [],
        isLogin: false
      };
  
    this.handleUserChange = this.handleUserChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  
  handleSubmit(event){
      event.preventDefault();
      axios.post('https://api.github.com/user',{}, {
        auth: {
          username: this.state.username,
          password: this.state.password
        }
      }).then((response) =&gt; {
        console.log(response.data);
        this.setState({
          userdata: response.data,
          isLogin:true
        });
      }).catch(function(error) {
        console.log('Error on Authentication' + error);
    });
  }
  
  handleUserChange(event){
      this.setState({
        username : event.target.value,
      });
  }
  
  handlePasswordChange = event =&gt; {
    this.setState({
      password: event.target.value
    });
  }
  
  render() {
      if(this.state.isLogin){
        return &lt;Redirect to={{
          pathname: 'home',
          state: this.state.data
        }} /&gt;
      }
      return (
        &lt;form onSubmit={this.handleSubmit}&gt;
          &lt;label&gt;
            username :
            &lt;input type="text" value={this.state.username} onChange={this.handleUserChange} required/&gt;
          &lt;/label&gt;
          &lt;label&gt;
            password :
            &lt;input type="password" value={this.state.password} onChange={this.handlePasswordChange} required/&gt;
          &lt;/label&gt;
          &lt;input type="submit" value="LogIn" /&gt;
        &lt;/form&gt;
  
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <h1>Home.js</h1>
  
  <pre><code>import React, { Component } from 'react';
  import axios from 'axios';
  
  class Home extends Component {
      state = {
        Search:'',
        results:[]
      }
  
    getInfo = () =&gt; {
  
      axios.get('https://api.github.com/search/users',{
      params: {
        q: this.state.Search,
        in:'login',
        type:'Users'
      }
    }).then(({ response }) =&gt; {
          this.setState({
            results: response.data.items.login
          })
        })
    }
  
    handleSearchChange(event){
      this.setState({
        Search: this.state.Search
      }, setInterval(() =&gt; {
        if (this.state.Search &amp;&amp; this.state.Search.length &gt; 1) {
          if (this.state.Search.length % 2 === 0) {
            this.getInfo();
          }
      }
    },500));
  
    }
  
    render(){
    return (
      &lt;div&gt;
        Home page {this.props.data}
  
      &lt;form&gt;
        &lt;label&gt;
          Search :
          &lt;input type="text" placeholder="Search for..." value={this.state.Search} onChange={this.handleSearchChange} /&gt;
        &lt;/label&gt;
     &lt;/form&gt;
       &lt;/div&gt;
    );
  }
  }
  
  export default Home;
  </code></pre>
  
  <p>My aim is to get a page after a successful login.</p>
  
  <p>Can I get help? Much appreciated.</p>
  
  <p>Thanks</p>