React-router : how to pass "match" object into a component declared as an ES6 class?

Question

I'am new to react-router (v4) and I was following the tutorial until this little problem :

This code works quite well

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>
);
}
}

I defined a route to /link/:id with 3 links to it. Then I declare my "Generic" component like this (as a function) :

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

This work as expected, no problem. But now, I'd like to declare my component with the ES6 class syntaxe like this :

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>
    );
}
}

And here I have an error : Cannot read property 'id' of undefined

How can I access the "match.params.id" properties using the ES6 class approach?

Thank you for your help.

Answer 1

Use {this.props.match.params.id}