Create a new page component with folder structure, route registration, and lazy loading. Use when adding a new page or route to the app.
Создай новую страницу $ARGUMENTS для Domiq frontend.
Определи имя страницы и путь из $ARGUMENTS:
Создай папку src/pages/<PageName>/ с файлами:
src/pages/<PageName>/index.tsx
import React from 'react';
import styles from './<PageName>.module.scss';
const <PageName>: React.FC = () => {
return (
<div className={styles.page}>
<h1><PageName></h1>
</div>
);
};
export default <PageName>;
src/pages/<PageName>/<PageName>.module.scss
.page {
padding: 24px;
max-width: 1280px;
margin: 0 auto;
}
src/router.tsx:const <PageName> = React.lazy(() => import('@/pages/<PageName>'));
// В routes добавить:
{
path: '/route-path',
element: (
<Suspense fallback={<PageSkeleton />}>
<<PageName> />
</Suspense>
),
}
<ProtectedRoute>:{
path: '/profile',
element: (
<ProtectedRoute>
<Suspense fallback={<PageSkeleton />}>
<Profile />
</Suspense>
</ProtectedRoute>
),
}
router.tsx.| Страница | Путь | Защищена |
|---|---|---|
| Home | / | нет |
| Listings | /listings | нет |
| ListingDetail | /listings/:id | нет |
| Login | /login | нет |
| Register | /register | нет |
| Profile | /profile | да |
| MyListings | /profile/listings | да |
| Favorites | /profile/favorites | да |
| Chat | /profile/chat | да |
| ChatRoom | /profile/chat/:id | да |
| CreateListing | /listings/create | да (agent) |
| EditListing | /listings/:id/edit | да (agent) |
| Admin | /admin | да (admin) |