Question

我有一个主要组件App，其中包含我的所有Match组件。我希望能够在顶部显示当前页面（例如在标题中），但是我无法获取当前路径名。

在App我有：

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

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

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

但是，当位置发生变化时，App似乎不会更新。我怎么能听到这个并作为道具传递？

Answer 1

如果您将标题放在Match组件上方，可能您希望标题显示在所有路线上。在这种情况下，也可以使用Match作为标题，并在每个模式上进行匹配，您将可以通过location访问props。

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

Answer 2

Match不再是react-router-dom（^ 4.3.1）中的组件。相反，我这样做是：

<Route path="" component={(props) => <Header {...props} page={"Main Page"} />}/>

在Header.js中：

const Header = (props) => (
  <header className="App-header">
  { console.log(props) }
    <img src={logo} className="App-logo" alt="logo"/>
    <TitleDiv>App Name : {props.page}</TitleDiv>
  </header>
);

结果为App Name : Main Page

React-router v4 - 显示当前页面

2 个答案: