Я ударился головой об этой ошибке с пары недель.Не могу понять, что происходит.
Я использую стартер Гэтсби здесь из stackbit.
Проблема связана со ссылкой - при передаче якоря страницы, например, = = # one, этоработает нормально, но при передаче ссылки на другую страницу она вылетает с этой ошибкой, так как компонент Link должен ее обрабатывать:
Error: Syntax error, unrecognized expression: /feugiat/
/ feugiat / Beingуже созданная страница, которая хорошо работает при вставке URL http://localhost:8000/feugiat
Конечно, я пытался передать URL, например, "feugiat", "/ feugiat", или даже "/" , ноэто также вызывает ошибку.
В конце концов, я попытался заменить пользовательский компонент Link на gatsby и даже жестко закодировать его для поддержки:
<Link to="/" />
Это вызывает ту же ошибку.
Пожалуйста, найдите под боковой панелью и компонентом Link.
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;
Я пытался использоватьотладчик с точками останова внутри этих двух компонентов, и кажется, что ошибка не приходит ни от одного из них, поэтому я нене знаю, где искать.