我想知道如何从我用来定义路线的组件中获取当前位置。例如,我有一个名为Routes的组件,它包含所有路由,如下所示:
class Routes extends React.Component {
render() {
return (
<Router>
<Nav />
<header>{customHeader}</header>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
// Other routes
</Switch>
</Router>
);
}
};
但是,当我尝试像在其他组件中一样访问this.props.location.pathname
时,它会返回undefined
。
在其他组件上,我需要使用withRouter
才能访问location
信息。但我不能将它与Routes
组件一起使用,因为它会引发错误。
我实际上并不需要pathname
,我只想查看用户的路线,因为我在访问特定网页时会呈现不同的标题内容。
答案 0 :(得分:4)
将标题包装在始终呈现的<Route>
中。然后,您可以通过道具访问所有内容。
class Routes extends React.Component {
render() {
return (
<Router>
<Nav />
<Route render={(props) => {
console.log(props.location)
return (
<header>{customHeader}</header>
)
}} />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
// Other routes
</Switch>
</Router>
);
}
};