Я новичок в реагировании, и я учусь, создав этот образец приложения, в котором пользователь пытается войти в систему с учетными данными. В случае успеха пользователь должен перенаправить на домашнюю страницу, где я могу отобразить некоторые данные. Пока я получаю ошибку ниже

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

Мои два компонента выглядят так, как показано ниже

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.info(response.data);
      this.setState({
        userdata: response.data,
        isLogin:true
      });
    }).catch(function(error) {
      console.info('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;

Моя цель - получить страницу после успешного входа в систему.

Могу я получить помощь? Очень признателен.

Спасибо