Gatsby activeClassName不工作预览
Gatsby是一个基于React的静态网站生成器，用于构建快速、高性能的现代网站。activeClassName是Gatsby中的一个属性，用于在当前页面的导航链接上添加活动状态的类名。
activeClassName属性在Gatsby中的使用方式如下：
import { Link } from "gatsby"
<Link to="/about" activeClassName="active">About</Link>在上述代码中，当用户访问/about页面时，Gatsby会自动将activeClassName指定的类名（这里是"active"）添加到导航链接上，以便样式化活动状态的链接。
这个功能在网站导航中非常有用，可以帮助用户明确当前所处的页面。例如，在导航菜单中高亮显示当前活动页面的链接。
Gatsby的优势在于其出色的性能和开发体验。它使用React和GraphQL来构建网站，可以轻松地创建响应式、可扩展的网站。Gatsby还提供了丰富的插件生态系统，可以方便地集成各种功能和服务。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。
腾讯云云服务器（CVM）是一种可弹性伸缩的云服务器，提供高性能、可靠稳定的计算能力。您可以根据实际需求选择不同配置的云服务器，满足各种应用场景的需求。
腾讯云对象存储（COS）是一种安全、低成本、高可靠的云存储服务，适用于存储和处理各种类型的数据。您可以将静态网站的文件（如HTML、CSS、JavaScript等）存储在COS中，并通过腾讯云CDN加速访问，提供更好的用户体验。
更多关于腾讯云云服务器和对象存储的详细信息，请访问以下链接：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
相关·内容
在使用Reactstrap的Gatsby站点中，我有一个带有几个菜单项的导航栏菜单。菜单项被设置为指向该页面内的锚定标记(例如#anchor1)。
<Nav navbar>
<NavItem>
<Link to="#anchor1" activeClassName="active" className="nav-link">Anchor 1</Link>
</NavItem>
<NavItem>
<Link to=
浏览 0提问于2020-04-29得票数 1
1回答
我正在尝试使用Gatsby中的activeClassName，以便突出显示活动的导航。我现在知道我错在哪里了 import React from 'react'
import {Link} from 'gatsby'
import headerStyles from './header.module.scss'
const Header = () => {
return (
<header className={headerStyles.header}>
<h1>
浏览 15提问于2020-12-31得票数 1
我正在构建一个简单的盖茨比博客，不知怎么的，我现在什么也看不见。当我启动服务器时，我得到的只是一个空白页，过了一段时间后就没有响应了。就像被困在一个无限的循环里。在控制台中，我看到这个404页面无法找到错误。
为什么我在每一页上都有404错误？无论是主页- localhost:8000还是其他类似于localhost:8000/blog/react的页面。
这是我的gatsby-config.js
module.exports = {
siteMetadata: {
title: "Full-stack bootcamp",
author:
浏览 1提问于2020-06-09得票数 1
1回答
我在盖茨比创建了网站(我的第一个网站)，我在部署页面上遇到了盖茨比链接的问题。我使用的是一个gatsby-starter-react-bootstrap，其中包括gatsby和，名称是:)我在NavDropdown.Item中找到了链接，这是的一个元素。
import React from "react"
import {Link} from "gatsby"
import {Navbar, Nav, NavDropdown, Image} from "react-bootstrap"
import Logo from "../ima
浏览 2提问于2020-06-11得票数 2
回答已采纳
我的目标是在导航栏中检查"hamburger“类的onClick事件。 我已经相应地设置了组件和样式，但是我不确定如何插入，以及在哪里插入JavaScript以选择此元素并添加事件侦听器。 下面是我当前的代码： import React from "react"
import { Link } from "gatsby"
import "../styles/master.scss"
import headerStyles from "./header.module.scss"
const Header = () =&g
浏览 31提问于2020-01-19得票数 0
2回答
我正在使用Sanity和Gatsby.js创建一个项目。我正在使用react-bootstrap创建主题。
但我似乎不能让它工作。在开发中，我得到了错误: Invariant :你不应该在外部使用
我对React很陌生，但它似乎指的是一个组件？Gatsby.js会干扰它吗？我不知道从哪里开始:)我遵循了react-router-bootstrap页面的非常简短的文档。这是我当前的code##
import React from "react"
import {NavItem} from "react-bootstrap";
import {LinkC
浏览 17提问于2020-02-04得票数 1
我已经试着让我的Gatsby Cloud CMS预览版工作了一周多了，现在还没有成功。我已经将Gatsby升级到最新的V3 (13.14.5)和它的所有依赖项。当运行yarn upgrade-interactive时，它会显示success All of your dependencies are up to date.。 我的“普通”Gatsby Cloud builds运行时没有错误，但我的CMS预览失败了，并显示以下错误： ERROR Error: listen EADDRINUSE: address already in use 127.0.0.1:8888
14:30:25 PM
浏览 109提问于2021-11-01得票数 0
我不知道哪里出了问题。我尝试过window.history.back()、window.history.go(-1)和window.history.go()。我甚至试着把它们的窗口都移走。页面一直在刷新，后退按钮也不起作用。我想实现的是能够返回到前一页(S)。
import React from "react"
import { Link, graphql, useStaticQuery} from 'gatsby'
//import './header.module.scss'
import headerStyles from '.
浏览 6提问于2021-02-09得票数 0
1回答
我正在使用插件，并试图适当地配置它的棱镜预览功能。
预期功能
在一个已经发布的文档上，我做了一个修改，保存，然后点击眼球预览按钮。我希望被重定向到我的本地Gatsby +棱镜实例，重定向到所需的页面，并查看我所做的更改。
到底发生了什么，
我改变了棱镜CMS，点击预览，然后被重定向到localhost:8000/，而不是我想要预览的页面。
下面的部分是“您能在浏览器中看到预览cookie吗？”我能够看到我所做的预览更改，表明“问题在代码中”。
是my gatsby-config.js 还是gatsby-config.js未正确配置？
src/utils/linkResolver.js
expo
浏览 2提问于2020-06-03得票数 2
1回答
我正在建立一个gatsby网站，使用Kentico作为无头CMS，唯一的问题是，它似乎不可能预览与Gatsby的kentico云内容。
kentico的一个很大的功能是它有内置的工作流程，这对于需要在发布之前获得批准的公司来说是很棒的。将会出现审批者想要在gatsby网站中查看其外观的情况，而不是在批准之前仅查看kentico中的内容。
浏览 14提问于2019-03-29得票数 1
当我尝试实现这一点时，我遇到了一个问题:使用ActiveClassName选项的。
我已经创建了一个包含以下链接的navbar.js组件：
import React from "react";
import { Link } from "gatsby";
import navbarStyles from "./navbar.module.css";
export default function Navbar() {
return (
<nav className={navbarStyles.navbar}>
浏览 1提问于2020-12-11得票数 3
我正在尝试集成gatsby-plugin-netlify-cms与盖茨比打字稿，每次我试图建立的网站，我得到以下错误信息。
“您可能需要一个适当的加载程序来处理这个文件类型，目前还没有配置加载程序来处理这个文件。”。
我的gatsby-config.js文件如下所示
module.exports = {
/* Your site config here */
plugins: [
`gatsby-plugin-styled-components`,
{
resolve: `gatsby-plugin-netlify-cms`,
options:
浏览 2提问于2020-10-09得票数 4
几天来，我一直在试着让现场预览节目“理智”地工作，但没有运气。
当我遵循本教程：时，它就像一种魅力。
但是当我创建一个像这样的入门博客时，它根本不起作用。
我已经学习了三个教程，但是它总是失败的，即使我做的完全一样。
这是我的gatsby-config：
module.exports = {
plugins: [
"gatsby-plugin-postcss",
"gatsby-plugin-react-helmet",
{
resolve: "gatsby-source-sanity",
op
浏览 6提问于2021-04-14得票数 1
回答已采纳
1回答
盖茨比有
问题是，它需要一个服务器运行24/7侦听请求，我想达到同样的结果，但在一个无服务器的设置(AWS Lambda更具体)，因为我们将需要一个预览非常少。
这里的上下文是使用带有Wordpress的Gatsby作为无头数据后端，我想在Wordpress中实现一个自定义预览链接，以便在发布它们之前预览它们。
到目前为止，有两个主要的挫折：
大小，目前使用Wordpress的盖茨比启动器的node_modules大小为570 is。
速度，无状态意味着每个预览请求都将再次运行gatsby develop。
老实说，我不知道这里的尺寸有什么解决方案，也不知道如何去掉包装。
至于
浏览 3提问于2021-03-23得票数 1
1回答
如何在不使用盖茨比云的情况下在strapi(后端)/gatsby(前端)中启用预览选项？
我用过盖茨比云，它工作得很好。但是我希望自己实现这个特性，因为gatby云对于企业来说是昂贵的。
浏览 2提问于2020-06-30得票数 2
1回答
我正在和盖茨比和棱镜一起开发网站。我正在使用prismic javascript实现棱镜预览。当单击prismic上的预览时，gatsby将其重定向到正确的URL，但更新的内容现在不显示。
我试着使用gatsby-source-prismic preview插件，但它不起作用。
const Preview = ({ history, location }) => {
useEffect(() => {
const params = qs.parse(location.search.slice(1))
if (!params.token) {
retu
浏览 0提问于2019-08-06得票数 1
这可能是一个新手问题，但是我在论坛上搜索的时候并没有找到解决方案：
我通过pages文件夹创建了一个' careers‘页面(文件名为careers.js，带有相应的slug /careers)，并在文件gatsby-node.js中使用createPages API创建了几个子页面，如下所示：
result.data.allMarkdownRemark.edges.forEach(({ node }) => {
const department = node.frontmatter.department
const slug = node
浏览 1提问于2020-05-18得票数 1
我在Netlify CMS中使用Gatsby，在Netlify CMS中预览模板时遇到了问题。
有一个可以像预期的那样工作。它从markdown和frontmatter获取数据，并与Netlify CMS小部件链接，还有一个通过useStaticQuery钩子获取数据的组件。
但是，一旦我在Netlify管理中访问，我就会得到：
Error: The result of this StaticQuery could not be fetched.
This is likely a bug in Gatsby and if refreshing the page does not fix it
浏览 52提问于2019-11-18得票数 1
1回答
我正在使用UIkit css框架和Gatsby.js。
当我使用OffCanvas (Nav)转到不同的页面时，下一页会重新加载，但是它会停止运行。什么事都没有发生，甚至没有滚动。
这是我的SideBar.jsx文件
我已经托管了部分构建的website.You可以检查这个问题。去
然后打开侧边栏，然后单击"Home“
import React from 'react'
import {Link} from 'gatsby'
import logo from "../images/logo.png"
import UIkit from &
浏览 2提问于2020-10-08得票数 0
1回答
我正在尝试使用FileAPI库在IE7和IE8浏览器中上传文件，但不幸的是它不能工作。它可以在所有其他浏览器中工作，但不能在IE7和IE8中工作，这是我的业务需求，让它在IE7和IE8中也能工作。下面是我的js代码
jQuery(function ($){
$(document)
.on('click', '.imageLabel', function (evt){
imageUploadId = $(this).attr("id").split("_")[1];
浏览 0提问于2015-08-20得票数 0
我有一个问题的反应路由器activeClassName上的链接。
return (
<div className="navigation">
<ul>
<li>
<Link to={'/'} activeClassName="active">
Home
</Link>
</li>
<li>
浏览 2提问于2016-03-14得票数 2
回答已采纳
我有一个项目与盖茨比，它的‘构建’是部署到AWS S3桶与静态网站托管。
我的盖茨比项目是使用插件，即从o数据集获取数据。
在我的非生产阶段，我希望有一个预览和watchMode，这样我就不会构建和部署应用程序的每一个变化。
在gatsby-config.js中的此配置中
{
resolve: "gatsby-source-sanity",
options: {
projectId: process.env.GATSBY_SANITY_PROJECT_ID,
dataset:
process.env.G
浏览 1提问于2021-08-12得票数 0
NavLink "/"路由组件activeclassname保持不变，即使"react-router-dom": "^6.4.2"上的路由更改。我尝试exact路径用于"/"路由和三元className，但没有影响。
因此，在路由时，我的UI似乎是两个活动类。
这是我的密码
<nav className='side-nav'>
<NavLink to='/' className='side-nav-links' activeclassname='acti
浏览 2提问于2022-10-31得票数 1
1回答
我使用gatsby shopify有一个问题，我在.env文件中有：
GATSBY_STOREFRONT_ACCESS_TOKEN = xxxxx
GATSBY_SHOPIFY_STORE_URL= xxxxxx.myshopify.com/
SHOPIFY_SHOP_PASSWORD= xxx
gatsby-config.js：
require("dotenv").config()
module.exports = {
siteMetadata: {
siteTitle: "xxxx",
siteTitleDefault: "xxx
浏览 6提问于2022-04-22得票数 0
回答已采纳
2回答
这里不使用React路由器，只想保持简单。我使用的是带有activeClassName属性和<Link>系统的Gatsby，但是，我认为它不起作用，因为我在主导航上使用它，然后我有一个带有类别的子导航。
我为subnav提供的解决方案是一个小函数，用于查看您是否位于目录中：
const activeStyle = {
color: "green",
background: "red",
}
function pathIncludes(word) {
return window.location.href.inclu
浏览 0提问于2020-01-29得票数 0
回答已采纳
我已经建立了一个静态网站与盖茨比和几个部分，我已经渲染出的网页，作为MDX，并通过自己的布局分析。这都是通过盖茨比插件-mdx文件，它工作得很好。
但是，当用户导航到该部分的子页面时，我正在尝试使顶层导航显示为活动。我正在使用Gatsby文档中的代码，它在我作为普通JS文件创建的页面上工作。
示例：
<Link partiallyActive={true} activeClassName="header-nav-active" to={menu.url} title={menu.title}>
{menu.label}
</Link>
它似乎不适用于
浏览 8提问于2022-02-01得票数 1
我们都知道在'to‘中我们把路线放在我们想要去的地方，就像 <NavLink to={`${option.value}`} activeClassName="active">Click Me <./NavLink> 但当我将其更改为 <NavLink to={{
pathname: `${option.value}`,
state: {scroll: true}
}} activeClassName="active">Click Me <./N
浏览 33提问于2021-11-16得票数 0
我正在为我的react应用程序(准确地说是使用gatsbyjs )开发一个导航栏。在导航栏中，我在componentDidMount中的navbar组件中初始化了一个标题栏。
它按预期工作，但在每次路由更改时，componentDidMount将再次运行，这将导致每个页面更改的阻塞速度加快，使其运行得越来越快。
这是预期的行为吗？如果是这样，我如何确保脚本只运行一次？
navbar.js
import React from 'react';
import { Link } from 'gatsby';
import styles from '../sty
浏览 1提问于2018-11-12得票数 0
回答已采纳
我正在尝试与NavLink一起工作，并使用它的activeClassName支柱，它适用于所有路由，但不适用于本地路由。
JSX代码
<ul>
<NavLink to='/' className="normal" activeClassName='active'>Home</NavLink>
<NavLink to='/menu' className="normal" activeClassName='active'>Menu<
浏览 1提问于2021-06-14得票数 0
回答已采纳
在我的Gatbsy站点的页面加载上有一个“闪烁”的未设置样式的内容。在这里查看当前的部署预览可能是最有帮助的。
到目前为止，我的研究使我找到了gatsby-config.js文件作为问题的根源。下面是该文件当前的样子：
module.exports = {
siteMetadata: {
title: 'Dillon Morris - UI Designer & Developer',
author: 'Dillon Morris',
siteUrl: 'www.dillonmorris.me',
浏览 7提问于2018-12-13得票数 3
我的应用程序中有react router NavLinks。其中之一如下： <NavLink exact to = {{pathname: "/", state: {genreId: 0}}} activeClassName = "active-menu" > Movies </NavLink> 在Router中，我从/重定向到/movies/all。问题是重定向后，activeClassName不再工作。其他未重定向的路由也没问题。如何使activeClassName与重定向路径一起工作？
浏览 24提问于2020-07-24得票数 0
回答已采纳
我已经用gatsby-source-contentful成功地获取了数据，但是我想不出如何用markdownRemark扩展内容丰富的查询，如官方中所示。
我在gatsby-config.js中添加了gatsby-config.js，运行了gatsby clean && gatsby develop，但仍然看不到Graphiql中的childMarkdownRemark。
gatsby-config.js
module.exports = {
siteMetadata: {
title: 'Test Contentful and MarkdownRem
浏览 1提问于2019-11-24得票数 3
1回答
对Gatsby和React来说还是个新手。到目前为止似乎一切顺利，但由于某些原因，我似乎不能在基于类的组件中使用静态查询方法映射项目。
我的代码添加在下面。
奇怪的是，{this.props.site.siteMetadata.title}运行良好，即使totalCount或primaryMenu也能很好地返回数据，但通过primaryMenu的映射不会返回任何内容。
我做错了什么吗？
import React from 'react';
import { Link, StaticQuery, graphql } from "gatsby"
class Nav
浏览 6提问于2020-06-02得票数 1
回答已采纳
寻找一种方法添加谷歌广告没有。我试着用头盔：
<Helmet>
{process.env.GATSBY_GOOGLE_ADSENSE ? (
<script
data-ad-client={`${process.env.GATSBY_GOOGLE_ADSENSE}`}
async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
></script>
) : (
console.log('Please add t
浏览 1提问于2021-04-22得票数 1
回答已采纳
我正在做一个CMS的风格指南，并遇到了一些问题。
这是我的webpack配置
exports.onCreateWebpackConfig = ({ actions }) => {
actions.setWebpackConfig({
plugins: [
new WebpackNotifierPlugin({
skipFirstNotification: true,
}),
],
resolve: {
// Enable absolute import paths
modules: [path.r
浏览 0提问于2020-02-27得票数 0
1回答
我是一个新的反应和学习路由的人。我想知道，如何在链接上使用活动类。我正在使用下面的代码，但是，它不工作。
<ul>
<li><Link to="about" activeClassName="active">About</Link></li>
<li><Link to="company" activeClassName="active">Company</Link></li>
<li><
浏览 1提问于2018-07-29得票数 1
我现在的问题是，
在以下代码中
我有一个可以正常工作的NavBar
问题就在这里
当我点击前三个元素时，一切都很好，只有当我点击“食物”或“镜头”时，我的NavBar才会再次以0开始显示，而我想让它停留在镜头或软体上
我希望我已经正确地表达了我的问题，谢谢你的帮助
import React from "react";
import { NavLink } from 'react-router-dom';
import Slider from "react-slick";
// Le css
import './NavBar.sc
浏览 7提问于2020-02-04得票数 0
因此，我试图创建一个页面的网站，我只希望导航链接滚动到锚链接的点击。我想知道为什么当我点击那些锚链接时，activeClassName不能工作。我注意到的是，在单击锚链接时显示的活动链接是父链接。
我已经尝试过对父链接使用partiallyActive={false}，但仍然什么也没有发生。
这是我的密码：
<li>
<Link className={headerStyles.navItem} activeClassName={headerStyles.navItemActive} to="/" partiallyActive={false}>
浏览 1提问于2019-08-16得票数 4
1回答
React activeClassName="active“不在服务器上工作。它在我的本地人身上正常工作。
Navbar.js
<ul className="sidebar-elements">
<li><NavLink to="/" exact activeClassName="active">Dashboard</NavLink></li>
<li><NavLink exact to="/about" activeClassN
浏览 1提问于2019-10-10得票数 3
我有一个gatsby项目，它工作良好，也有404页，但是我要么在gatsby build期间得到错误，要么在成功完成构建过程之后打开浏览器：
Building static HTML for pageserror: Error: ENOENT: no such file or directory
如果在gatsby build期间没有收到错误，那么在运行gatsby serve并打开浏览器时，必须打开浏览器：
Error: ENOENT: no such file or directory, stat '/project/public/404.html'
浏览 0提问于2020-07-19得票数 6
回答已采纳
当我使用props.match.url时，它可以很好地工作。 import {withTranslation} from 'react-i18next';
function Navbar ({props}) {
return (
<nav className={css.navbar}>
<NavLink exact to={`${props.match.url}`} className={css.link} activeClassName={css.linkActive}>
浏览 26提问于2021-02-04得票数 0
1回答
我已经开始学习Gatsby，每次我在src/pages文件夹中进行任何更改时，它都会给出一个来自.cache文件夹的错误，如下所示:生成开发JavaScript包失败
ENOENT: no such file or directory, open '...\Gatsby\src\pages\someFile.js'
我正在删除.cache文件夹，然后重新运行gatsby develop命令，它工作了，但它需要更多的时间。
问:有没有什么命令可以让它更快或更容易？
浏览 2提问于2021-01-21得票数 2
1回答
您好，我正在使用Gatsby使用股票市场API构建我的应用程序，并且我是Gatsby的新手。我试图将我的每个页面包装在<Layout> </Layout>周围，因为在我的layout.js中有一个页眉和页脚，然后在我所有的页面上，都会有相同的标题和页脚，而不会重复代码。我得到的错误是Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You l
浏览 19提问于2020-06-17得票数 1
回答已采纳
我是ReactJS世界的新手，我想知道如何将active类名传递给<li>元素而不是<a>(Link)元素。
现在我有了这样的密码。单击锚类时会发生更改。
<li><IndexLink to='/' activeclassName='active'>A</IndexLink></li>
<li><Link to='/b' activeclassName='active'>B</Link></li>
<li&
浏览 1提问于2016-01-28得票数 50
回答已采纳
1回答
我试过运行npm i -g gatsby-cli和sudo npm i -g gatsby-cli，但当我运行gatsby --version时，它仍然显示2.12.78，即使它还显示"Update available 2.12.78 gatsby-cli to→“ 以下是我的包版本： npm版本: 7.19.1 节点版本: v16.5.0 Gatsby CLI版本: 2.12.78
浏览 22提问于2021-07-30得票数 2
activeClassName of React路由器NavLink在映射时不工作，如下面的代码所示。视图将来自其容器的链接作为映射它们的道具来接收。一切都很好，包括标准的className，但是activeClassName不能工作。当我在映射之外手动添加一个NavLink时，它可以工作，但是我找不到错误。任何帮助都很感激。
import React from "react";
import { NavLink } from "react-router-dom";
import styles from './style.scss';
clas
浏览 0提问于2018-11-06得票数 2
回答已采纳
1回答
所以我使用了React和sass，并且我尝试在<NavLink>上使用activeClassName属性，我意识到我的活动类无法工作，因为活动类先于默认类。如何解决此问题？ 下面是代码 HTML <div className="nav-dropdown">
<div className="dropdown-links-list">
<div> <NavLink to="/" exact activeClassName="drop
浏览 6提问于2021-02-05得票数 0
我按照以下步骤创建了一个项目：
npm install -g gatsby
gatsby new dev-blog
cd dev-blog
npm install
然后我试着从项目开始
gatsby develop --host localhost --port 9000
此时，它抛出一个异常：
Failed to require /Users/antkong/wd/blogs/gatsby/dev-blog/html.js
./html.js
Module build failed: Error: Couldn't find preset "es2015" relat
浏览 2提问于2017-05-05得票数 3
我正在建造我的第一个内容丰富的项目。在内容演示设置中，他们使用的是内容类型名称中的emojis。我也从一位满意的代表那里得到了这一建议。而且，将内容类型组织起来似乎是个好主意：
应用程序应该在GatsbyJS上运行。所以我启动了一个
npx gatsby new gatsby-starter-contentful-homepage https://github.com/gatsbyjs/gatsby-starter-contentful-homepage
我还为gatsby-source-contentful设置了gatsby-config.js，如下所示：
{
reso
浏览 9提问于2022-06-01得票数 -1
当我尝试在react中启动我的项目时，我得到了这个错误，我正在使用Ubuntu系统 Found bindings for the following environments: - Linux 64-bit with Node.js 9.x 我用的是node -v : 10.13.0和npm -v : 6.11.2，这里还附上了我的package.json文件，有没有人能帮我解决这个问题？ {
"name": "gatsby-starter-hello-world",
"private": true,
"descrip
浏览 16提问于2020-08-25得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
