Ссылка Nextjs с объектом URL не работает при использовании идентификатора элемента в имени пути
Я добавил переводы на свой веб-сайт, что требует от меня использования объекта URL при создании ссылок. У меня нет никаких проблем с этим нигде, кроме случаев, когда я хочу щелкнуть ссылку, указывающую, например, на /#contact.
когда я просто использую href='/#contact' это будет работать. Но если бы я использовал href = {{ pathname: "/#contact", query: query }}, это не помогло бы.
Я уже просмотрел документацию next/link, и она показывает эти вещи только по отдельности, но не при совместной работе.
Ответы 2
Может быть, этот комментарий поможет вам?
Редактировать: Действительно, похоже, что с запросом /#contact преобразуется в %23contact. Это тоже ваша проблема?
Если это так, в качестве обходного пути вы можете проанализировать параметры запроса и использовать только href как таковой:
import Link from 'next/link';
import React from 'react';
const Contact = () => {
const query = { name: 'john', age: 10 };
const params = Object.keys(query).reduce(
(acc, el, index) =>
acc.concat(`${index === 0 ? '?' : '&'}${el}=${query[el]}`),
'',
);
return (
<div>
<Link href = {`/#contact${params}`}>Click me</Link>
</div>
);
};
export default Contact;
Что приводит к http://localhost:3000/#contact?name=john&age=10
Боюсь, нет, использование href = "/#contact" as = {{ pathname: "/#contact", query: query }} не работает
поскольку я не могу публиковать код в комментариях, я отредактировал свой ответ, указав потенциальное обходное решение @MichaelVanhoutte
Боюсь, это не работает. Вероятно, это связано с тем, что запрос, который я использую, является функцией next-export-i18n const [query] = useLanguageQuery();
Я нашел это решение href = {{ pathname: "/", query: query ,hash: "contact"}}, и оно работает для меня.
При использовании формата объекта URL в
hrefзначения будут закодированы в URL (что означает, что#становится%23). Вместо этого вы также можете передать параметры запроса вhrefв виде строки, например.href = "/#contact?param=value".