React router params not passing - react-router

Question

I am trying to go to page and pass id, but my ownParams in mapStatetoProps remains empty. Do note the url generated is correct.
My current structure is
index.jsx
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>,
document.getElementById('root')
);
app.jsx
class App extends Component {
render() {
return (
<div>
<Nav />
<Router />
</div>
);
}
}
export default App;
router.jsx
const Router = () => (
<router>
<Switch>
<Route path='/signup' component={Signup} />
<Route path='/browse' component={Browse}/>
<Route path='/detail/:id' component={Detail} />
</Switch>
</router>
)
export default Router;
detail.jsx
export default class App extends Component {
render() {
return (
<div>
<Info />
<Message/>
</div>
);
}
}
Now in info.jsx at the end of the file
function mapStateToProps({posts}, ownProps){
console.log('>>>>>>>> post_show State to props', ownProps);
return { post : posts[ownProps.match.params.id]};
}
export default connect(mapStateToProps, { fetchPost, deletePost })(PostsShow);
this gives me an error because ownProps is empty.