Question

我想根据我所在的页面导入不同的CSS。 HTML将保持不变。访问当前位置需要做什么？

我在想我可以在构造函数中添加if语句并在那里导入CSS，但我不确定它是否有效。

编辑：您无法从constructor内导入，有没有办法进行条件导入？

这是我的代码：

import React from 'react'
import Link from 'gatsby-link'


class Menu extends React.Component {

    constructor(props) {
        super(props)

        //how do I get myCurrentLocation?
        if(myCurrentLocation == '/') {
            import menuStyle from '../page-assets/global/styles/menu/_home-page.sass'
        } else {
            import menuStyle from '../page-assets/global/styles/menu/_regular-page.sass'
        }
    }

    render (){
        return (
            <nav className="menu">
                <Link to="/work-ive-done/" className="menu-item">
                    <span className="menu-item__heading">
                        Work
                    </span>
                    <span className="menu-item__sub-text">
                        ive done
                    </span>
                </Link>

                //other menu items ...

            </nav>
        )
    }
}

export default Menu;

Answer 1

gatsby-link是react-router-dom Link的包装器，因此您应该可以使用this.props.match.path访问您的路由。

否则：您可以使用window.location.href

访问当前网址

https://developer.mozilla.org/en-US/docs/Web/API/Window/location

Answer 2

在Gatsby v2中，页面组件将能够通过以下方式访问其位置：

对于class个组件：this.props.location.pathname
对于functional个组件：props.location.pathname

对于功能组件，请确保props正在通过其参数传递。例如

const IndexPage = (props) => (
  <Layout>
    <p>This works {props.location.pathname}</p>
  </Layout>
)

对于其他任何地方，您都可以使用@reach/router的{{1}}组件（积分：jlengstorf）

Location

这是显示以上内容的codesandbox。还要记入jlengstorf 。

如何根据当前网址导入组件？

2 个答案: