Gatsby链接-错误:语法错误,无法识别的表达式:

时间:2019-07-06 01:53:44

标签: gatsby

两个星期以来,我一直反对这个错误。无法理解发生了什么。

我在这里从stackbit使用gatsby起动器。

问题与链接有关-当传递类似于to =“#one”的页面锚时,它可以正常工作,但是当将链接传递到另一个页面时,它会因该错误而崩溃,因为链接组件应该可以处理它:

Error: Syntax error, unrecognized expression: /feugiat/

enter image description here / feugiat /是已经创建的页面,在粘贴网址http://localhost:8000/feugiat

时效果很好

当然,我尝试传递“ feugiat”,“ / feugiat”,甚至“ /” 之类的网址,但也会引发错误。

最终,我尝试用gatsby替换自定义Link组件,甚至硬编码为prop:

<Link to="/" /> 

这引发了同样的错误。

请在侧边栏和链接组件下面找到。

Sidebar.js

import React from 'react';
import _ from 'lodash';

import { Link, toUrl, safePrefix } from '../utils';

export default class Sidebar extends React.Component {
  render() {
    return (
      <section id="sidebar">
        <div className="inner">
          <nav>
            <ul>
              {_.map(_.get(this.props, 'pageContext.frontmatter.sidebar.entries'), (item, item_idx) => (
                <li key={item_idx}>
                  <Link
                    to={
                      _.get(item, 'url').startsWith('#')
                        ? _.get(item, 'url')
                        : safePrefix(toUrl(this.props.pageContext.pages, _.get(item, 'url')))
                    }
                  >
                    {_.get(item, 'title')}
                  </Link>
                </li>
              ))}
            </ul>
          </nav>
        </div>
      </section>
    );
  }
}

link.js

import React from 'react';
import { Link as GatsbyLink } from 'gatsby';

// Since DOM elements <a> cannot receive activeClassName
// and partiallyActive, destructure the prop here and
// pass it only to GatsbyLink
const Link = ({ children, to, activeClassName, partiallyActive, ...other }) => {
  // Tailor the following test to your environment.
  // This example assumes that any internal link (intended for Gatsby)
  // will start with exactly one slash, and that anything else is external.
  const internal = /^\/(?!\/)/.test(to);

  // Use Gatsby Link for internal links, and <a> for others
  if (internal) {
    return (
      <GatsbyLink to={to} activeClassName={activeClassName} partiallyActive={partiallyActive} {...other}>
        {children}
      </GatsbyLink>
    );
  }
  return (
    <a href={to} {...other}>
      {children}
    </a>
  );
};

export default Link;

我试图在这两个组件中使用带有断点的调试器,而且似乎没有一个错误出现,所以我不知道在哪里看。

0 个答案:

没有答案