Блог

Главная - Вопросы по программированию - Необходимо ли передавать ‘passHref’ в NextJS , в котором семантический пользовательский интерфейс реагирует как дочерний компонент?

Необходимо ли передавать ‘passHref’ в NextJS , в котором семантический пользовательский интерфейс реагирует как дочерний компонент?

#reactjs #next.js #semantic-ui-react

Вопрос:

Я читал документы nextjs, и здесь говорится, что:

Если дочерний элемент Link является функциональным компонентом, в дополнение к использованию passHref необходимо обернуть компонент в React.forwardRef :

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

Без этого (ключевая ссылка) тег не будет иметь атрибута href, что может повредить SEO вашего сайта.

Я могу пройти passHref вот так:

 <Link href='/posts' passHref>
  <Button>See Posts</Button>
</Link>

Но проблема в том, что я не думаю, что мы можем обернуть компонент из семантического пользовательского интерфейса React.forwardRef , поскольку он только что импортирован. Поэтому мои вопросы таковы:

  • Разве это просто нормально-оставить все как есть?
  • Или есть обходной путь, чтобы это не повредило SEO?

Комментарии:

1. next/link Компонент предназначен либо для обертывания <a> тега, либо для компонента, который сам обертывает <a> тег. В вашем сценарии Button компонент из семантического пользовательского интерфейса не является ни тем, ни другим. Если вы хотите использовать Link там, вам придется добавить <a> к нему в качестве прямого потомка (который будет родителем Button ). Тогда возникает вопрос: зачем вам нужна кнопка, завернутая в якорь? Разве это не должно быть одно или другое?

Ответ №1:

ДА. В документации NextJS указано, что если ваш ребенок является не просто тегом, а функциональным компонентом или компонентом класса, то необходим пароль. Обязательно передавайте его всякий раз, когда вы используете компонент react в качестве дочернего

Ответ №2:

Вам нужен пароль только с некоторыми тегами, вот пример. речь идет не о SEO, и ваша цитата о том, что «Если у вас нет атрибута passHref и есть дочерний элемент, ваш SEO может быть нарушен».

Просто создайте 2 страницы с паролем и без, и проверьте страницы, например, с помощью LIghthouse chrome или любого другого инструмента. Кроме того, проверьте DOM, вы увидите, что никаких изменений в SEO напрямую нет. (ofc, если дочерние компоненты являются компонентами html или даже реагируют без «требуемого» свойства href.)

Комментарии:

1. Да, но здесь четко указано ( nextjs.org/docs/api-reference/next/… ) что если дочерний элемент Ссылки является функциональным компонентом, в дополнение к использованию passHref. Meaning, мы должны передавать passHref его при использовании функционального компонента, а не только при использовании других HTML-тегов.

Метки: ,