Итоги: Маршрутизация
Часть раздела Основы Next.js путешествия по React на Coddy — урок 10 из 47.
Задание
СреднеИтоги главы: превратите одностраничное приложение в небольшой сайт, используя всё из этой главы.
- Создайте
app/about/page.jsx. Сделайте default-export компонента, который возвращает<h1>сid="about-title"и точным текстомAbout us. - В
app/page.jsxимпортируйтеLinkизnext/linkи добавьте ссылку на/aboutсid="to-about". - Создайте динамический маршрут
app/menu/[slug]/page.jsx:asyncкомпонент, который ожидаетparamsи рендерит найденныйslugвнутри<h1>сid="dish".
Тесты перейдут по вашей ссылке, затем откроют два разных блюда и будут ожидать два разных заголовка.
Попробуйте сами
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}Все уроки раздела Основы Next.js
2Маршрутизация и ссылки
Папки как маршрутыВложенные маршрутыСвязывание страницДинамические маршрутыСтраницы 404 (Not Found)Итоги: Маршрутизация