成功重定向后，React不呈现Component

Question

我是新手做出反应并尝试编写一些代码，用户在成功登录后尝试导航到另一个页面。 但是，我发现重定向发生在Home组件上，但页面至少没有依赖于我的日志语句。 看到一个空白的白页。 我的组件如下所示。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';


import {
  Router,
  Route,
} from "react-router-dom";
import Home from './Home';
import history from './History';

ReactDOM.render(
  <Router history={history}>
  <div>
    <Route path="/" exact component={App} />
    <Route path="home" exact component={Home} />
  </div>
  </Router>,
  document.getElementById('root'));

registerServiceWorker();

App.js

import React, { Component } from 'react';
import axios from 'axios';
import history from './History';


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){
     history.push({pathname: 'home', state: this.state.data});
     history.go('home');
    //browserHistory.push('home');
    }
    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 {

  constructor(props){
    super(props);
    this.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(){
    console.log("Home page : " + this.props.data);
  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;

关于我在这里做什么错误的任何帮助？

谢谢

Answer 1

你缺少/所以路线应该如下。

    <Route path="/home" exact component={Home} />

而推动

history.push({pathname: '/home', state: this.state.data});

Answer 2

history.push({pathname: '/home', state: this.state.data}); 和<Route path="/home" exact component={Home} /> 。

缺少/