两个星期以来,我一直反对这个错误。无法理解发生了什么。
我在这里从stackbit使用gatsby起动器。
问题与链接有关-当传递类似于to =“#one”的页面锚时,它可以正常工作,但是当将链接传递到另一个页面时,它会因该错误而崩溃,因为链接组件应该可以处理它:
Error: Syntax error, unrecognized expression: /feugiat/
/ 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;
我试图在这两个组件中使用带有断点的调试器,而且似乎没有一个错误出现,所以我不知道在哪里看。