reactjs - React-router v4 - 显示当前页面

Question

我有一个主要组件 App，它包含我的所有 Match 组件。我希望能够在顶部显示当前页面(例如在标题中)，但我在获取当前路径名时遇到问题。

在应用程序中我有:

App.contextTypes = {
  history: React.PropTypes.object,
};

我将当前路径名传递给组件:

<Header currentPathname={this.context.history.location.pathname} />

但是，当位置发生变化时，App 似乎不会更新。我怎样才能监听这个并作为 Prop 传递？

Answer 1

如果您将 header 放置在 Match 组件上方，那么您可能希望 header 显示在所有路由上。在这种情况下，还可以对 header 使用 Match，并匹配每个模式，然后您将可以通过 props 访问 location。

<Match 
  pattern="/" 
  component={props => <Header pathname={props.location.pathname} />}
/>