this.props.history未定義の反応-ルータ-DOM

Question

マイApp.js

ある

import React, { Component } from 'react'; 
import './App.css'; 
import Continue from './components/Continue'; 
import Login from './components/Login'; 
import Table from './components/Table'; 
import Profile from './components/Profile'; 
import { BrowserRouter,Switch, Route,Redirect } from 'react-router-dom' 


function loggedIn() { 
    return !!localStorage.getItem('token'); 
} 
class App extends Component { 
    render() { 
return (
    <div className="App"> 
    <BrowserRouter > 
     <Switch> 
      <Route exact path = "/" component ={Login}/> 
      <Route 
      exact 
      path = "/continue" 
      component = {() => 
       loggedIn() ? <Continue /> : <Redirect to="/" />} 
      /> 
      <Route 
      exact 
      path = "/home" 
      component={() => 
       loggedIn() ? <Table /> : <Redirect to="/" />} 
      /> 
      <Route 
      exact 
      path = "/profile" 
      component={() => 
       loggedIn() ? <Profile /> : <Redirect to="/" />} 
      />  </Switch> 
    </BrowserRouter> 
    </div> 
); 
} 
} 

    export default App; 

は、その後、私はルートにプッシュログインフォームから/

this.props.history.push('/continue'); 

を続けるこれは、正常起こります。

しかし、私は/家に同じ方法をプッシュしようとしたときからを続行し、

this.props.history.push('/home'); 

私はLOGGEDINを（削除した場合はエラー

TypeError: this.props.history is undefined

をスロー）メイクそれはログインルートとして、次に動作します。

他のコンポーネントに小道具の履歴を送信する方法を理解するために、いくつかの助けが必要です。

Answer 1

import React, { Component } from 'react'; 
import './App.css'; 
import Continue from './components/Continue'; 
import Login from './components/Login'; 
import Table from './components/Table'; 
import Profile from './components/Profile'; 
import PropTypes from "prop-types"; 
import { BrowserRouter,Switch, Route,Redirect } from 'react-router-dom' 


function loggedIn() { 
return !!localStorage.getItem('token'); 
} 
class App extends Component { 
    render() { 
    const {location} = this.props.location; 
    return (
    <div className="App"> 
     <BrowserRouter > 
     <Switch> 
      <Route exact path = "/" component ={Login}/> 
      <Route 
      exact 
      location={location} 
      path = "/continue" 
      component = {() => 
      loggedIn() ? <Continue /> : <Redirect to="/" />} 
      /> 
      <Route 
      exact 
      location={location} 
      path = "/home" 
      component={() => 
      loggedIn() ? <Table /> : <Redirect to="/" />} 
      /> 
     <Route 
      exact 
      location={location} 
      path = "/profile" 
      component={() => 
      loggedIn() ? <Profile /> : <Redirect to="/" />} 
     />   
     </Switch> 
    </BrowserRouter> 
    </div> 
    ); 
    } 
} 
App.propTypes = { 
    location: PropTypes.shape({ 
    pathname: PropTypes.string.isRequired, 
    }).isRequired 
}; 

export default App; 

あなたはプロップ種類のパッケージがインストールされていない場合、私はあなたがアドホック `withRouter`を使用して、エクスポートしたコンポーネントをラップする必要があると思う

npm install --save prop-types