React Redirect should not use outside the router

Question

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

Uncaught Error: You should not use <Redirect> outside a <Router>

My two components look like below

App.js

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) => {
      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 => {
  this.setState({
    password: event.target.value
  });
}

render() {
    if(this.state.isLogin){
      return <Redirect to={{
        pathname: 'home',
        state: this.state.data
      }} />
    }
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          username :
          <input type="text" value={this.state.username} onChange={this.handleUserChange} required/>
        </label>
        <label>
          password :
          <input type="password" value={this.state.password} onChange={this.handlePasswordChange} required/>
        </label>
        <input type="submit" value="LogIn" />
      </form>

    );
  }
}

export default App;

Home.js

import React, { Component } from 'react';
import axios from 'axios';

class Home extends Component {
    state = {
      Search:'',
      results:[]
    }

  getInfo = () => {

    axios.get('https://api.github.com/search/users',{
    params: {
      q: this.state.Search,
      in:'login',
      type:'Users'
    }
  }).then(({ response }) => {
        this.setState({
          results: response.data.items.login
        })
      })
  }

  handleSearchChange(event){
    this.setState({
      Search: this.state.Search
    }, setInterval(() => {
      if (this.state.Search && this.state.Search.length > 1) {
        if (this.state.Search.length % 2 === 0) {
          this.getInfo();
        }
    }
  },500));

  }

  render(){
  return (
    <div>
      Home page {this.props.data}

    <form>
      <label>
        Search :
        <input type="text" placeholder="Search for..." value={this.state.Search} onChange={this.handleSearchChange} />
      </label>
   </form>
     </div>
  );
}
}

export default Home;

My aim is to get a page after a successful login.

Can I get help? Much appreciated.

Thanks

Answer 1

Make sure you enclose your <App/> with <BrowserRouter> in your index.js.

ReactDom.render(<BrowserRouter><App/></BrowserRouter>,document.getElementById('root'));

(Use: import {BrowserRouter} from 'react-router-dom')