反应路由器没有通过

Question

我正在尝试转到页面并传递id，但mapStatetoProps中我自己的Params仍为空。请注意生成的网址是否正确。

我目前的结构是

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>

    );
  }
}

现在位于文件末尾的info.jsx中

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

这给了我一个错误，因为ownProps是空的。