无法在React Router v4中推送历史记录（无编程路由）

我很难获得反应路由器v4来推送基于if语句条件的程序化历史记录 . 点按钮上的所有路由都可以正常工作，但我无法让历史记录正常工作 . 我得到的错误是：

TypeError: Cannot read property 'push' of undefined

这就行了

self.props.history.push('/picturemain')

很明显，在我的组件中，它并不认为历史是定义的 . 但我不确定我做错了什么 . 这是我的路由页面：

import React from 'react'
import { Switch, Route,  BrowserRouter as Router } from 'react-router-dom'
import { injectGlobal, ThemeProvider } from 'styled-components'

import { HomePage, AboutPage, PictureSwapper, PostsPage, Posts1, Posts2, Posts3, Posts4, PostsArchive, MessagePage, PictureMain } from 'components'

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <Router>
        <div>
        <Route path="/" component={Posts3} exact />
        <Route path="/home" component={HomePage} exact />
        <Route path="/about" component={AboutPage} exact />
        <Route path="/posts" component={PostsPage} exact />
        <Route path="/pictureswapper" component={PictureSwapper} exact />
        <Route path="/message" component={MessagePage} exact />
        <Route path="/postpages/1" component={Posts1} exact />
        <Route path="/postpages/2" component={Posts2} exact />
        <Route path="/postpages/3" component={Posts3} exact />
        <Route path="/postpages/4" component={Posts4} exact />
        <Route path="/postsarchive" component={PostsArchive} exact />
        <Route path="/picturemain" component={PictureMain} exact />
        </div>
      </Router>
    </ThemeProvider>
  )
}

export default App

这是我的页面，其条件是推动历史 . 条件成功到达后端，并且仅抛出错误，因为历史未定义 .

import React, { Component, PropTypes } from 'react'
import { Badge, IconButton, Heading, Paragraph, ParagraphHolder, 
PrimaryNavigation, 
SecondaryNavigation, TertiaryNavigation, 
Caption, Link, ParagraphSmall, AlignContainer,
SubHeader, PictureMain} from 'components'
import renderIf from 'render-if'
import styled from 'styled-components'
import axios from 'axios'
import {
  BrowserRouter as Router,
  Route,
  Redirect,
  Switch
} from 'react-router-dom';


class PictureLogin extends Component{

  static propTypes = {
    history: PropTypes.object.isRequired
  }

  constructor(props){
    super(props);
    this.state = {
      name: '',
      password: '',
      redirect: ''
    }
  }

  registerClick(e){
    e.preventDefault();
    var self = this;
    axios.post('http://localhost:5000/register', {
      name: this.state.name,
      password: this.state.password
    })
      .then((response)=>{
       console.log('response from the python call ', response.data);
       if(response.data === 'usersuccessfullyadded'){
        self.props.history.push('/picturemain')
       }
      })
     .catch(()=>{
       console.log('python axios error');
     });
  }

  loginClick(e){
    e.preventDefault();
    var self = this;
    axios.post('http://localhost:5000/login', {
      name: this.state.name,
      password: this.state.password
    })
      .then((response)=>{
       console.log('response from the python call ', response.data);
       if(response.data === 'passwordsmatch'){
        console.log(self.props)
        self.props.history.push('/picturemain')
       }
     })
     .catch((err)=>{
       console.log('python axios error');
       console.log('and the error is ', err);
     });
  }

  resetRedirect(){
    this.setState({
      redirect: ""
    })
  }

  render(){
    return(
        <FlexContainer>
          <FlexRow>
            <div>Login</div>

            <input  value={this.state.name}
               onChange={(e)=>{this.setState({name: e.target.value})}} 
               type="username" name="username" placeholder="User Name"/>


            <input  value={this.state.password} 
               onChange={(e)=>{this.setState({password: e.target.value})}} 
               type="password" name="password" placeholder="Password"/>


            <button onClick={(e)=>this.registerClick(e)}>Register</button>
            <button onClick={(e)=>this.loginClick(e)}>Login</button>
          </FlexRow>
        </FlexContainer>
    )
  }
}



export default PictureLogin

FlexContainer和FlexRow是我自己的样式组件，这里没有声明 . 没关系，因为样式在这张表中，我只是把它拿出来以便于阅读 .

编辑：有人在这里与可能的欺骗有关：How to navigate dynamically using react router dom . 该修复应该是我将其添加到 Headers import {withRouter} from 'react-router-dom'; 并像这样导出 export default withRouter(PictureLogin); . 我打算把这个问题打开，因为有明显的问题 . 我路由到的页面具有可渲染数据，但由于某种原因不能渲染 . 这不是一个有效的修复方法 .

我正在渲染的组件是一个简单的hello世界，以确保我没有包含任何会破坏它的奇怪东西 . 这是我尝试路由到的组件：

import React, { Component } from 'react'
import renderIf from 'render-if'
import styled from 'styled-components'
import axios from 'axios'


class PictureMain extends Component{
  constructor(props){
    super(props);
    this.state = {
    }
  }

  render(){
    return(
      <div>
        hello world
      </div>
    )
  }
}



export default PictureMain