OwnProps沒有通過React Router V4傳遞

Question

我正在重構從React Router的V2到V4的應用程序，並且我遇到了一個問題，其中我的mapStateToProps的屬性沒有傳遞給每個組件。這裏是我的設置：

App.jsx

render() { 
     return (
      <div> 
       <Header /> 
       <Navbar /> 
       <Routes {...this.props} /> 
       <Footer /> 
      </div> 
     ) 
    } 

const mapStateToProps = (state, ownProps) => { 
    const { page } = state 
    return { 
     routeProps: ownProps, 
     page: page 
    } 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
     pageActions: bindActionCreators(pageActionCreators, dispatch), 
    } 
} 

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App)) 

Routes.jsx了這一行：

<Route exact path="/:name/information" render={ ({ match }) => <InfoPage {...this.props} match={ match } /> } />

InfoPage.jsx

componentDidMount() { 
    const { routeProps, pageActions } = this.props 
    pageActions.fetchInfoPage(routeProps.match.params.name) 
} 
componentWillReceiveProps(nextProps) { 
    if (this.props.page.page !== nextProps.page.page) { 
     const { routeProps, pageActions } = nextProps 
     pageActions.fetchInfoPage(routeProps.match.params.name) 
    } 
} 
render() { 
    return (
     <InfoPageView 
     page={ this.props.page } 
     pageActions={ this.props.pageActions } 
     routeProps={ this.props.routeProps } 
     /> 
    ) 
} 

的問題是，當我嘗試訪問使用InfoPage的路線，即/orders/information從不加載。當我檢查Redux開發工具時，它說page和content未定義。在重構時我在InfoPage組件上更改的唯一東西是match.params而不是params。這讓我相信我的Redux/Router集成有些問題，特別是ownProps/routeProps沒有正確傳遞。

關於這裏有什麼問題的任何想法？

Answer 1

首先，確保你包裝Routes.jsx（正如@lemarc和@Kyle Richardson提到的那樣），以便您的路由組件能夠正確更新。

當您用withRouter包裝連接的組件時，它將使該組件的props中的match可用。

而不是試圖通過ownProps映射match，你可以從你的封裝組件的props訪問它。

此外，它看起來像你試圖引用綁定到您的子組件InfoPageViewApp組件的動作創建者。這是React + Redux應用程序中的反模式。

如果您的InfoPageView需要分派動作的能力，則應通過其自己的mapDispatchToProps函數直接將其提供給InfoPageView。您嘗試訪問的page屬性也是如此;如果InfoPageView需要讀取的page的價值，你應該通過mapStateToProps中直接提供：

import { Component } from 'react' 
import { connect, bindActionCreators } from 'react-redux' 
import { withRouter } from 'react-router' 
import { fetchInfoPage as fetchInfoPageAction } from '../actions/fetchInfoPage' 
//^import directly from wherever this Action Creator resides in your project^

class InfoPageView extends Component { 
    componentDidMount() { 

     const { match } = this.props 
     fetchInfoPage(match.params.name) // <-- `match` provided by withRouter() 

    } 

    componentWillReceiveProps(nextProps) { 

     if (this.props.page.page !== nextProps.page.page) { 
      const { match, fetchInfoPage } = nextProps 
      fetchInfoPage(match.params.name) // <-- `match` provided by withRouter() 
     } 

    } 
    render() { 

     return (
      <InfoPageView /> 
     ) 

    } 

} 

const mapStateToProps = (state) => ({ 
    page: state.page, 
    content: state.content, 
}) 
const mapDispatchToProps = (dispatch) => ({ 
    fetchInfoPage: bindActionCreators(fetchInfoPageAction, dispatch), 
}) 

export default withRouter(
    connect(mapStateToProps, mapDispatchToProps)(InfoPageView) 
) 

如果，畢竟，你會發現page和content仍然undefined，很可能是因爲他們只是從失蹤您的page減速機。驗證這些屬性出現在您page減速的initialState：

const initialState = { page: 1, content: 'initial content' } 

const page = (state = initialState, action) => ({ 
    switch (action.type) { 

     // (action type `case` statements here) 

     default: 
      return state 
    } 
}) 

export default page 

...也驗證您是通過combineReducers傳遞page減速到你的店：

import pageReducer from '../reducers/page' 

const rootReducer = combineReducers({ 
    page: pageReducer, 
}) 

const store = configureStore(
    rootReducer, 
    /* store middlewares, etc */ 
) 

export default store 

Answer 2

你能請嘗試移動withRouter呼叫Routes.jsx

export default withRouter(connect()(Routes)) 

我認爲，需要在同一文件中的任何<Route ... />組件。