C:\Users\Administrator\Desktop\fusejs\test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>Bước 1: Thực hiện component Header</h2>
<pre>
IndexPage
const styles = {
a: {
marginRight: 10,
}
}
</pre>
<h2>Bước 2: Thực hiện dynamic header1, header2, header3, header4, header5</h2>
<pre>
const DynamicComponent1 = dynamic(() => import('./../components/hello1'));
const DynamicComponent2 = dynamic(() => import('./../components/hello2'));
const DynamicComponent3 = dynamic(() => import('./../components/hello3'));
const DynamicComponent4 = dynamic(() => import('./../components/hello4'));
const DynamicComponent5 = dynamic(() => import('./../components/hello5'));
export default function Hello1() {
return <p>Hello World 1 (imported dynamically) </p>
}
</pre>
</body>
</html>
C:\Users\Administrator\Desktop\fusejs\pages\index.js
import React, { useState } from 'react';
import dynamic from 'next/dynamic';
import Header from '../components/Header';
const DynamicComponent1 = dynamic(() => import('./../components/hello1'));
const DynamicComponent2 = dynamic(() => import('./../components/hello2'));
const DynamicComponent3 = dynamic(() => import('./../components/hello3'));
const DynamicComponent4 = dynamic(() => import('./../components/hello4'));
const DynamicComponent5 = dynamic(() => import('./../components/hello5'));
const IndexPage = () => {
const [falsyField] = useState(false);
const [showMore, setShowMore] = useState(false);
return (
<div>
<Header />
<DynamicComponent1 />
<DynamicComponent2 />
<DynamicComponent3 />
{falsyField && <DynamicComponent4 />}
<button onClick={() => setShowMore(!showMore)}>Toggle Show More</button>
{showMore && <DynamicComponent5 />}
</div>
)
}
export default IndexPage;
C:\Users\Administrator\Desktop\fusejs\components\Header.js
import React from 'react';
import Link from 'next/link';
const styles = {
a: {
marginRight: 10,
}
}
function Header() {
return (
<div>
<Link href="/">
<a style={styles.a}>Home</a>
</Link>
<Link href="/about">
<a>About</a>
</Link>
</div>
)
}
export default Header;
C:\Users\Administrator\Desktop\fusejs\components\hello1.js
export default function Hello1() {
return <p>Hello World 1 (imported dynamically) </p>
}
C:\Users\Administrator\Desktop\fusejs\components\hello2.js
export default function Hello2() {
return <p>Hello World 2 (imported dynamically) </p>
}
C:\Users\Administrator\Desktop\fusejs\components\hello3.js
export default function Hello3() {
return <p>Hello World 3 (imported dynamically) </p>
}
C:\Users\Administrator\Desktop\fusejs\components\hello4.js
export default function Hello4() {
return <p>Hello World 4 (imported dynamically) </p>
}
C:\Users\Administrator\Desktop\fusejs\components\hello5.js
export default function Hello5() {
return <p>Hello World 5 (imported dynamically) </p>
}
