React.lazy: this.props is empty - reactjs

Question

I have simple test project with App.js
import React, { Component, Suspense } from 'react';
import { BrowserRouter, Route, NavLink } from 'react-router-dom';
const Posts = React.lazy(() => import('./containers/Posts'));
class App extends Component {
render() {
return (
<BrowserRouter>
<React.Fragment>
<nav>
<NavLink to="/posts/222">Posts Page</NavLink>
</nav>
<Route path="/posts/:id" render={() => (
<Suspense fallback={<div>Loading...</div>}>
<Posts {...this.props} />
</Suspense>
)}
/>
</React.Fragment>
</BrowserRouter>
);
}
}
export default App;
and containers/Posts.js
import React, {Component} from 'react';
class Posts extends Component {
componentDidMount() {
console.log(this.props);
}
render() {
return (<h1>The Posts Page</h1>)
}
};
export default Posts;
and this.props in Posts is an empty object.
How can I get this.props.match.params.id in this case?

Answer 1

Wrap Posts with withRouter from react-router-dom
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
class Posts extends Component {
componentDidMount() {
console.log(this.props);
}
render() {
return (<h1>The Posts Page</h1>)
}
};
export default withRouter(Posts);