我正在使用gasby
,这里的主文件始终是layout.js
,它们是所有文件的父文件。由于它是一个父文件,那么我如何在其中获取定位道具this.props.location.pathname
?
这是我的布局组件
class Layout extends Component {
componentWillMount() {
console.log(this.props, 'dssssssssssssf')
}
render() {
const { children } = this.props
return(
<StaticQuery
query={graphql`
query SiteTitleQuery {
site {
siteMetadata {
title
}
}
}
`}
render={data => (
<>
<div>
<Provider store={store}>
{children}
</Provider>
</div>
</>
)}
/>
)
}
}
Layout.propTypes = {
children: PropTypes.node.isRequired
}
export default Layout.
答案 0 :(得分:2)
如盖茨比文档中所述:
在v1中,布局组件可以访问历史记录,位置和匹配项 道具。在v2中,只有页面可以访问这些道具。如果您需要这些 布局组件中的道具,将它们从页面传递出去。
这意味着您需要转到呈现Layout组件的位置,通常是index.js或app.js页面,然后将位置属性直接传递给它:
import React from "react"
import Layout from "../components/layout"
export default props => (
<Layout location={props.location}>
<div>Hello World</div>
</Layout>
)
然后您可以在布局中使用它。您还可以阅读更多here。