React-router：如何將「匹配」對象傳遞給聲明爲ES6類的組件？

Question

我'新反應路由器（V4），我是按照教程，直到這個小問題：

此代碼工作得很好

class App extends Component { 
render() { 
return (
    <Router> 
     <div> 
      <ul> 
       <li><Link to="/link/value1" className="nav-link">Value1</Link></li> 
       <li><Link to="/link/value2" className="nav-link">Value2</Link></li> 
       <li><Link to="/link/value3" className="nav-link">Value3</Link></li> 
     </ul> 
     <hr/> 
     <Route path="/link/:id" component={Generic}/> 
     </div> 
    </Router> 
); 
} 
} 

我定義了一個路線/鏈接/：ID有3個鏈接。然後我聲明我的「通用」組件如下（作爲函數）：

const Generic = ({ match }) => (
<div className="wrapper"> 
    <div className="section"> 
     <div className="container"> 
      <h3>Menu : {match.params.id}</h3> 
     </div> 
    </div> 
</div> 
) 

這個工作正如所料，沒有問題。但現在，我想用ES6類syntaxe這樣的聲明我的組件：

class Generic extends React.Component { 
constructor(props) { 
    super(props); 
} 

render() { 
    return (
     <div className="wrapper"> 
      <div className="section"> 
       <div className="container"> 
        <h3>Menu : {this.props.params.id}</h3> 
       </div> 
      </div> 
     </div> 
    ); 
} 
} 

在這裏，我有一個錯誤：無法未定義

讀取屬性「ID」我怎樣才能訪問使用ES6類方法的「match.params.id」屬性？

謝謝你的幫助。

Answer 1

使用{this.props.match.params.id}