無法讀取未定義（陣營路由器4）

Question

的特性 'PARAMS' 我已經設置了渲染部件的路由：

<Route exact path="/page/:id" location={this.props.location} key={this.props.location.key} render={({ location }) => (
    <PageStart key={this.props.location.key} /> 
)} /> 

然後該組件內（PageStart）我有：

this.props.match.params.id 

但它拋出一個錯誤：

Cannot read property 'params' of undefined 

路過時簡單地調用component={}道具似乎很好地工作，但不是在仁德r功能。爲什麼？

Answer 1

因爲與render你是不是通過路由器傳遞到組件的默認道具，像比賽，歷史等

當你這樣寫：

<PageStart key={this.props.location.key} /> 

這意味着在PageStart沒有props值零件。

寫這樣的：

render = {props => <PageStart {...props} key={this.props.location.key} /> } /> 

現在{...props}會把所有的值到PageStart組件。

Answer 2

因爲您沒有將任何match屬性傳遞給PageStart。你給它一個key但不是match。 試試這個：

<Route 
    exact 
    path="/page/:id" 
    location={this.props.location} 
    key={this.props.location.key} 
    render={({ 
     location, 
     match 
    }) => (
     <PageStart key={this.props.location.key} match={match} /> 
    )} 
/> 

Answer 3

錯誤說match道具是不確定的。這是正確的，沒有match道具在這裏：

<PageStart key={this.props.location.key} /> 

所以我們需要將它傳遞的render函數接收來自反應路由器一堆道具，和所有的人都需要進一步向下傳遞。所以，先把它們攤開，然後加上你自己的道具：

<Route 
    exact 
    path="/page/:id" 
    location={this.props.location} 
    key={this.props.location.key} 
    render={(props) => (
    <PageStart {...props} key={this.props.location.key} /> 
)} 
/>