如何导入基于当前 url 的组件？

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.[=14= 访问您的路由]

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

访问当前的 url

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 的 Location 组件（致谢：jlengstorf）

import React from 'react';
import { Location } from '@reach/router';

export default () => (
  <Location>
    {({ navigate, location }) => /* ... */}
  </Location>
);

这是一个 codesandbox showing the above. Also credits jlengstorf 。

如何导入基于当前 url 的组件？

How can I import a component based on the current url?

gatsby