Skip to content
youhoc
  • Pages
    • Home
    • Modern App Guidelines
    • Linux
      • Day 1: Linux Distributions & Navigation
      • Day 2: User Management
      • Day 3: File Permission & Ownership
      • Day 4: Package Management
      • Day 5: Services Management
    • Javascript
      • JS The Weird Part
        • Execution Context
        • Types & Operators
        • Objects & Functions
        • Error Handling & Strict Mode
        • Typescript, ES6, Tra
      • Modern JS
        • JS in the Browser
        • Data Storage JSON
        • Modern JS
        • Advanced Objects & Methods
        • Webpack & Babel
        • Async
      • jQuery
        • In-depth Analysis of jQuery
      • React-ready JS
        • Arrow Function
        • Template Literals
        • Logical AND, OR, Ternary, Nullish Operators
        • Destructuring & Rest Operator
        • Array Method
        • Immutability and Spread Operator
        • Promises, Async/Await, Callback
    • PHP
      • gruntJS
      • composer
      • MySQL
    • Docker
      • Container Basics
      • Container Networking
      • Container Image
      • Container Volume & Persistent Data
      • Dockerfile
      • Docker Compose
      • Docker Registry
    • Node.js
      • 1. Installing & Exploring
      • 2. Core Modules
      • 3. Get User Input
      • File System & Input Arguments
      • 5. Express Web Server
      • 6. Deploy to Heroku & Github
      • Authentication
      • 7. Databases
      • 8. Rest API
    • ReactJS
      • React from Andrew
        • Summary from Next
        • 1. Basics
        • 2. React Components
        • 3. Webpack
        • 4. Styling with SCSS
        • 5. React Router
        • 6. React Hook
      • Modern React From The Beginning
        • Intro to JSX
        • Vite Build Tools
        • Basic Component Creation
        • Component State
        • Props & Component Composition
        • useState with Inputs & Form Submission
        • useEffect, useRef & Local Storage
        • Async / Await and Http Request in React
        • React Router: Declarative Mode
        • ContextAPI
        • React Router: Framework Mode
          • icon picker
            File-routing & HTML Layouts
          • Server-side Data Query
          • Links & Navigation
          • Loaders
    • Typescript
      • Type User vs UserProp
    • Payload CMS
youhoc
/
/
File-routing & HTML Layouts

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 ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.