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

를 throw() 메이크업 로그인 경로로 사용하면 작동합니다.

다른 구성 요소에 소품 내역을 전송하는 방법을 알아 보려면 도움이 필요합니다.

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