Сформировать страницу Контакты
Завершена
Проект: Пивная карта
| Планируемый запуск: | 24.04.2021 | Дата начала: | 24.04.2021 | Планируемое завершение: | 24.04.2021 | Дата завершения: | 24.04.2021 |
| Проект | Задача | Статус | Дата постановки | Начало | Конец | Кто создал |
|---|---|---|---|---|---|---|
| Пивная карта | Сформировать страницу Контакты | Завершена | 24.04.2021 04:33:12 | 24.04.2021 14:25:38 | 24.04.2021 14:54:44 | |
| Пивная карта | Сформировать страницу Контакты | Завершена | 24.04.2021 04:33:12 | 24.04.2021 04:47:38 | 24.04.2021 05:45:55 |
Николай, приветствую!
Нужна помощь и в этом вопросе)
1. Сюда /home/dima/docker/docker-pivkarta/prisma-cms/pivkarta.ru-2/pages/contacts/index.ts
добавил
export { default } from 'src/pages/Contacts'
2. /home/dima/docker/docker-pivkarta/prisma-cms/pivkarta.ru-2/src/pages/Contacts/index.ts завел
import { NextSeo } from 'next-seo'
import React from 'react'
import { Page } from '../_App/interfaces'
import ContactsPageView from './View'
/**
* Страница контактов
*/
const ContactsPage: Page = () => {
return (
<NextSeo
title="Контакты"
description="Контакты Пивной карты"
/>
<ContactsPageView />
)
}
export default ContactsPage
3. Добавил /home/dima/docker/docker-pivkarta/prisma-cms/pivkarta.ru-2/src/pages/Contacts/View/index.ts
import React, { useMemo } from 'react'
//import Grid from '@material-ui/core/Grid'
//import { CitiesPageViewProps } from './interfaces'
//import CityLink from 'src/components/ui/Link/City'
const СontactsPageView: React.FC<> = () => {
//return useMemo(() => {
return (
<h1>Контакты</h1>
)
//}, [])
}
export default ContactsPageView
Получил ошибки:
/src/pages/Contacts/index.ts:17:12
Syntax error: Unexpected token, expected ","
15 |
16 | <NextSeo
> 17 | title="Контакты"
| ^
18 | description="Контакты Пивной карты"
19 | />
20 |
Убираю этот тег - ругется также на <ContactsPageView />
Комменчу return () и ставлю return "1" - отдаётстраницу c 1 на url /contacts
Посмотришь по возможности?
Дима, привет!
Замени .ts на .tsx
Это как раньше для файлов с реактом расширения указывали не .js, а .jsx, потому что там не чистый JS-код, а плюс и реактовая разметка (HTML-теги). Вот парсер и не может понять, что у тебя в JS-коде за непонятные примеси.
Спасибо! Всё оказалось просто
Я закоммитил, но что-то там типом Page во вьюхе пождозрительное: он вообще что делает?
И гитхаб ругается https://github.com/Pivkarta/pivkarta.ru-2/actions/runs/780734838
Гитхаб тебе ругается вполне конкретно:
./src/pages/Contacts/View/index.tsx:2:22
Type error: Cannot find module '../_App/interfaces' or its corresponding type declarations.
Ты разве в IDE своей не видишь той же самой ошибки во вьюхе?
К тому же ты можешь выполнить (и перед коммитом должен выполнять, по-хорошему) yarn types и увидел бы ошибку.
Признавайся, выкатывал git push --no-verify?
Признавайся, выкатывал git push --no-verify? -- Неа! git push origin master
Нельзя просто так взять и выкатить коммит с ошибкой. Там хуки прописаны. На пуш выполняется yarn types, то есть проверка типов. Вот смотри:
Только вдруг если у тебя husky вдруг не установилось, или вдруг хуки выпилил (хотя я сомневаюсь), или ты глобально "поправил багу", как-то запретив хуки в гите.
Еще раз:
1. yarn types у тебя что показывает?
2. В IDE ты не видишь ошибку в той вьюхе?
yarn types
-------------------
src/pages/Contacts/View/index.tsx:2:22 - error TS2307: Cannot find module '../_App/interfaces' or its corresponding type declarations.
2 import { Page } from '../_App/interfaces'
~~~~~~~~~~~~~~~~~~~~
Found 1 error.
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
А в IDE вроде норм.
Тип Page вроде есть, его ему не нравится?
Вот в src/pages/Contacts/View/index.tsx норм?
У меня не норм.
В общем, у тебя путь битый, ссылается на несуществующий файл (потому что ты это скопировал из файла другой страницы другой вложенности). В твоем случае правильный путь import { Page } from '../../_App/interfaces'
Но, в данном компоненте тип Page тебе вообще не нужен. Это для корневых компонентов страниц, а не вложенных. То есть в целом работать будет, если путь поправить, но будут на вход параметры, которые особо и не нужны там.
Плюс у самого компонента появляются методы, которые в данном случае не нужны.
Сам по себе тип Page - это расширенный тип некстового типа Page, который задает свойства для страниц роутинга, это которые в /pages прописываются.
Тебе же во вьюхе нужен просто React.FC (Function Component)
Понял, спасибо огромное!
Не за что!
Изменил во вьюхе тип Page на React.FC.
Проверил yarn types и закоммитил.
Как бы ещё понять, что это за тит такой и когда его использовать?
Супер, спасибо!
Не за что!