Gatsby Link - Ошибка: синтаксическая ошибка, нераспознанное выражение: - PullRequest
0 голосов
/ 06 июля 2019

Я ударился головой об этой ошибке с пары недель.Не могу понять, что происходит.

Я использую стартер Гэтсби здесь из stackbit.

Проблема связана со ссылкой - при передаче якоря страницы, например, = = # one, этоработает нормально, но при передаче ссылки на другую страницу она вылетает с этой ошибкой, так как компонент Link должен ее обрабатывать:

Error: Syntax error, unrecognized expression: /feugiat/

enter image description here / 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;

Я пытался использоватьотладчик с точками останова внутри этих двух компонентов, и кажется, что ошибка не приходит ни от одного из них, поэтому я нене знаю, где искать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...