位置缺少道具（ReactJS）

Question

我是一種新的reactjs，我正在一步一步學習。我遇到了一個問題，那就是當我嘗試訪問道具中的位置參數時，它返回我undefined。我試圖找到解決辦法，但大多數人都寫我要補充我的組件中的路由器，但我包裹它在路由器，但仍，我沒有獲得位置參數

export const abcdContainer = withRouter(connect(
    mapStateToProps, 
    mapDispatchToProps 
)(abcd)); 

我試圖訪問和組件中的位置參數，但問題是它中沒有位置參數。誰能告訴我它是什麼，是怎麼了？

請，如果有人知道什麼是錯了，請告訴我，我已經花了我半天，我無法弄清楚

代碼和版本添加了URL

路由器版本=> 2.8.1

網址：http://localhost:3000/somePage?someParam=cm9oYW5qYWxpbHRlYWNoZXJAZ21haWwuY29t

abcdContainer.js

const mapStateToProps = (state, ownProps) => { 
    // some code over here 
} 

const mapDispatchToProps = (dispatch, ownProps) => { 
      // some code over here 
}; 

export const abcdContainer = withRouter(connect(
    mapStateToProps, 
    mapDispatchToProps 
)(abcd)); 

abcd.jsx

class abcd extends Component { 

    constructor(props, context) { 
     super(props, context); 
     this.state = { 
      // setting state over here 
     }; 
    } 

    abcdFunction(){ 
     if (this.props.location.query.someParam !== undefined){ // trying to extract someParam value from location 
      // some code over here 
     } 
    } 

    render() { 
     // some code over here 
    } 
} 


export default CSSModules(abcd, styles, { allowMultiple: true }); 

這裏是流。路由器重定向到容器中，然後將容器重定向到真正的組件

Route.js

export const Routes = ({ store }) => (
    <Provider store={store}> 
     <Router history={browserHistory}> 
      <Route path="/" component={aContainer}> 
       <IndexRoute component={IContainer} /> 
       // some routes  
       <Route path="/openAbcd" component={() => (<abcdContainer caller="aaaaaaa" />)} /> 
       // some routes 
      </Route> 

      // some routes 
     </Router> 
    </Provider> 
); 

Routes.propTypes = { 
    store: React.PropTypes.object.isRequired, 
}; 

Answer 1

<Route path="/openAbcd" component={() => (<abcdContainer caller="aaaaaaa" />)} /> 

如果您使用內聯Arrow功能來呈現你的組件你爲什麼不只需將道具直接傳遞給組件？那麼你將不需要0​​。像這樣：

<Route path="/openAbcd" component={props => (<abcdContainer caller="aaaaaaa" {...props} />)} /> 

Also the docs of react-router v2.8.1 says about withRouter()：

甲HOC（較高階分量），該包裝另一個組件提供props.router。

它不提供location，但router作爲道具。我建議您將react-router更新至v4或至少v3。

編輯：「但是爲什麼這些道具不被隱式插入？」：

陣營知道兩種類型的組件。 Stateless functional components and class-based components。功能組件是一種函數，它接受帶有數據的單個props對象參數並返回一個React元素。再看看這行代碼的：

<Route path="/openAbcd" component={() => (<abcdContainer caller="aaaaaaa" />)} /> 

您通過箭頭功能() => (<abcdContainer caller="aaaaaaa" />)您<Route>元件，它的功能組件的內聯定義，需要props作爲參數，並返回一個呈現陣營元素，在這種情況下，這是您的<abcdContainer>。但正如你所看到的，通過用空的括號定義它，你省去了函數中的道具參數：() => (<AComponent />)。 React不會自動將道具傳遞給在功能組件內呈現的子組件。將<abcdContainer>包裝成內聯功能組件時，您有責任自行將道具傳遞給它。到component道具你<Route>元素的

但是，如果你通過你的類/變量類基/功能組件就像你在你的其他途徑做了那麼它將呈現此組件的隱含傳遞的道具，因爲它不裹功能組件：

// this will directly render <aContainer> and pass the props to it 
<Route path="/" component={aContainer}> 

你的所作所爲是創造一個「無名功能的包裝部件」，不採取任何道具，也沒有通過任何道具進一步下跌。

請注意，您不應該廣泛使用withRouter()。這個HOC只是在那裏注入一個路由器到組件中，而這些組件並不是通過匹配路由本身呈現的，而是例如更深入你的組件樹。在你的情況下，你不需要它。