this.props.history.push適用於某些組件，而不適用於其他組件

我試圖使用browserHistory.push以編程方式更改頁面。在我的其中一個組件中，但不在我嵌入其中的組件中。this.props.history.push適用於某些組件，而不適用於其他組件

有沒有人知道爲什麼我的項目拋出的錯誤只在子組件而不是父組件？

無法讀取未定義

父組件的特性 '推'

import React, {Component} from 'react'; 
import { browserHistory } from 'react-router'; 
import ChildView from './ChildView'; 

class ParentView extends Component { 

constructor(props) { 
    super(props); 
    this.addEvent = this.addEvent.bind(this); 
    } 

changePage() { 
    this.props.history.push("/someNewPage"); 
    } 

render() { 
    return (
     <div> 
     <div> 
      <button onClick={this.changePage}>Go to a New Page!</button> 
     </div> 

     <ChildView /> // this is the child component where this.props.history.push doesn't work 

     </div> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
     user: state.user 
    }; 
} 

function matchDispatchToProps(dispatch) { 
    return bindActionCreators({ 
     setName: setName 
    }, dispatch) 
} 

export default connect(mapStateToProps, matchDispatchToProps)(ParentView);

輔元件

import React, {Component} from 'react'; 
    import { browserHistory } from 'react-router'; 

    class ChildView extends Component { 

    constructor(props) { 
     super(props); 
     this.addEvent = this.addEvent.bind(this); 
     } 

    changePage() { 
     this.props.history.push("/someNewPage"); 
     } 

    render() { 
     return (
      <div> 
      <div> 
       <button onClick={this.changePage}>Go to a New Page!</button> 
      </div> 

      </div> 
     ); 
     } 
    } 

    function mapStateToProps(state) { 
     return { 
      user: state.user 
     }; 
    } 

    function matchDispatchToProps(dispatch) { 
     return bindActionCreators({ 
      setName: setName 
     }, dispatch) 
    } 

    export default connect(mapStateToProps, matchDispatchToProps)(ChildView);

路由器

// Libraries 
import React from 'react'; 
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; 
import { browserHistory } from 'react-router'; 

// Components 
import NotFound from './components/NotFound'; 
import ParentView from './components/ParentView'; 
import ChildView from './components/ChildView'; 
import SomeNewPage from './components/SomeNewPage'; 

// Redux 
import { Provider } from 'react-redux'; 
import {createStore} from 'redux'; 
import allReducers from './reducers'; 

const store = createStore(
    allReducers, 
    window.devToolsExtension && window.devToolsExtension() 
); 

const routes = (
    <Router history={browserHistory}> 
     <div> 
     <Provider store={store}> 
      <Switch> 
       <Route path="/" exact component={Home} /> 
       <Route path="/parentView" component={ParentView} /> 
       <Route path="/someNewPage" component={SomeNewPage} /> 
       <Route path="/childView" component={ChildView} /> 
       <Route component={NotFound} /> 
      </Switch> 
     </Provider> 
     </div> 
    </Router> 
); 

export default routes;

正如你所看到的，組件幾乎一致，除了孩子一個是父一個內部相同。

注意我曾嘗試這些方法，但他們不解決這個問題對我來說：

來源

2017-05-07 Rbar

起反應路由器您使用的版本？ – CraigRodrigues

你在你的問題回答了你的問題。

正如您所看到的，除之外，組件幾乎完全相同，子組件在父組件內。

事實上，組件進一步嵌套是您的問題。 React路由器僅將路由道具注入到路由到的組件，但不注入嵌套在其中的組件。

請參閱this問題的接受答案。基本的想法是，你現在需要找到一種方法將路由道具注入到子組件中。您可以通過將孩子包裹在HOC withRouter中來做到這一點。

export default withRouter(connect(mapStateToProps, matchDispatchToProps)(ChildView));

我希望這會有所幫助。

來源

2017-05-07 22:25:26

由於我仍然想繼續連接我的組件到redux，你知道如何將我的'export default connect（mapStateToProps，matchDispatchToProps）（ChildView）;'line和推薦的'export default withRouter（Child）從你的鏈接線？ – Rbar

只是爲了回答他人的問題，'出口默認與路由器（連接（mapStateToProps，matchDispatchToProps）（ChildView））;'就像一個魅力。巨大的感謝，@ promisified！ – Rbar

請隨時將這段代碼添加到我的答案中。 –

使用withRouter是好的，另一種選擇是將歷史作爲父項傳遞給子項（不使用路由器），例如，G：

家長

<SignupForm history={this.props.history}/>

兒童

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

來源

2018-03-01 02:09:53 Notorious

this.props.history.push適用於某些組件，而不適用於其他組件

回答

相關問題