Skip to content
youhoc

File-routing & HTML Layouts

Như PHP

Routes & File Routing

Tất cả Routes nằm trong file routes.ts và folder routes.
có thể routes bằng file hoặc folder (với file mặc định là index.tsx)
khuyến khích routes theo folder, chắc là vì 1 routes có thể có nhiều component con sau này
Đối với Routes Home mặc định
Nên dời Meta Object từ home.tsx ra root.tsx để SET MẶC ĐỊNH tiêu đề, cũng như meta:og cho tất cả trang:
nếu cần meta riêng cho từng trang thì sẽ khai báo sau

Layout Routes

// thay vì
index("routes/home/index.tsx"),

// thì chuyển sang
layout('routes/layouts/home.tsx', [index('routes/home/index.tsx')] ),

// tạo layout template tại '/routes/layouts/home.tsx'
const HomeLayout = () => {
return <>Home Layout</>;
};

export default HomeLayout;

// nếu muốn layout template render thêm component con bên trong '/routes/home/index.tsx'
// Now on the home page, you will only see the text "Home Layout". This is because we haven't added the `Outlet` component to the layout route. The `Outlet` component is used to render the child routes of the layout route.
import { Outlet } from 'react-router';

const HomeLayout = () => {
return (
<>
<section className='max-w-6xl mx-auto px-6 my-8'>
<Outlet /> // tiếp tục render component bên trong route, là /routes/home/index.tsx
</section>
</>
);
};

export default HomeLayout;
The <Outlet /> component serves as a placeholder in React Router, allowing you to render the appropriate component for a specific route defined in your application.
This aligns perfectly with the learning objective of understanding routing in React, as it clearly identifies where the nested routes will render.
Final Routes with Layouts
Routes = path
HomeLayout = layout template + special components of that layout
-- Hero = 1 component of Home
Home = content of home
Want to print your doc?
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.