รับเขียนโปรแกรม: ReactBootrap ตอน 1 การสร้าง Master Page และ ตัวอย่างการใช้งาน react-router-dom ใน ReactBootrap

การทำ Master Page เกิดจากการที่ หน้าเว็บจะมีส่วนต่างๆที่เหมือนๆ กันในแต่ละหน้า เช่น Header Menu Footer หากเรามีหน้าเว็บ 20 หน้า และมีการเพิ่ม เมนูขึ้นมาทีหลังเราต้องแก้เมนูทั้ง 20 ไฟล์ แต่จะดีกว่าหากเราสามารถแก้ไขข้อมูลในไฟล์เดียว แล้วหน้าเว็บทั้ง 20 หน้า เปลี่ยนตามไปด้วย

ในบทความนี้จะแสดงตัวอย่างการทำ Master Page โดยใช้ ReactJS Bootstrap และ react-router-dom และเป็นการแสดงตัวอย่างของ การใช้งาน ReactBootstrap ร่วมกับ react-router-dom อีกด้วย

หมายเหตุ ตัวอย่างนี้ใช้ react-router-dom version 5.2.0 ซึ่งตอนนี้มี version react-router-dom ใหม่แล้ว

รับเขียนโปรแกรม ReactJS

Link ที่เกี่ยวข้อง ตัวอย่างการใช้งาน React Router DOM ใน React Material UI ตอน 1

ดู code ในcode sand box

https://codesandbox.io/embed/intelligent-wind-hhnln?fontsize=14&hidenavigation=1&theme=dark

1. สร้าง Project ชื่อว่า ด้วยคำสั่ง npx create-react-app react_bootstrap

2. เข้าไปใน folder react_bootstrap ที่เพิ่งสร้าง ด้วยคำสั่ง cd react_bootstrap และ install ReactBoostrap ด้วยคำสั่ง npm install react-bootstrap@next bootstrap@5.1.1 --save

3.install react-router-dom ด้วยคำสั่ง npm install react-router-dom --save

4. เปิด project ใน visual studio code ด้วนคำสั่ง code .

5. สร้างไฟล์ master page ชื่อว่า master_page.js

ใส่ code ดังนี้

import { Navbar, Container ,Nav} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
//สร้าง Component Master Page
const MasterPage=(props)=>{

    return (<>
    {/*-------สร้าง แถบเมนูด้านบน ด้วย Navbar จาก ReactBootstrap-----------*/}
    <Navbar bg="light" expand="lg">
    <Container>
        <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="me-auto">
            {/*--------สร้าง Link ไปที่ page1----------*/}
            <Nav.Link href="#/page1">Page1</Nav.Link>
            {/*--------สร้าง Link ไปที่ page2----------*/}
            <Nav.Link href="#/page2">Page2</Nav.Link>
        </Nav>
        </Navbar.Collapse>
    </Container>
    </Navbar>

        <div className="container">
            {/*--------ส่วนของเนื้อหาเว็บที่จะมาแสดง-----*/}
            {props.children}
        </div>


    </>)

}

export default MasterPage;

6. สร้างไฟล์ page1.js และ page2.js โดยมี code ดังนี้

ไฟล์ page1.js

//import ไฟล์ master page
import MasterPage from "./master_page";

const Page1=()=>{

    return(<MasterPage>

        <h4>Page1</h4>

    </MasterPage>);
}

export default Page1;

ไฟล์ page2.js

//import ไฟล์ master page
import MasterPage from "./master_page";

const Page2=()=>{

    return(<MasterPage>

        <h4>page2</h4>

    </MasterPage>);
}

export default Page2;

7. แก้ไฟล์ App.js เพื่อกำหนด Route

//เรียกใช้ Object ใน react-router-dom
import {
HashRouter,
Switch,
Route,
useParams,
useHistory
} from "react-router-dom";
import Page1 from "./page1";
import Page2 from "./page2";

function App() {
return (
    <>
    <HashRouter>
      <Switch>
        <Route exact path="/" children={<Page1 />}></Route>
        {/* เมื่อเปิดมาหน้าแรกให้แสดง Component Page1 */}
        <Route path="/page1" children={<Page1 />}></Route>
        {/* สำหรับ Path /page1 ให้แสดง Component Page1 */}
        <Route path="/page2" children={<Page2 />}></Route>
        {/* สำหรับ Path /page2 ให้แสดง Component Page2 */}
        <Route path="*" children={<Page1 />}></Route>
        {/* ถ้าไม่ตรงกับ path ตามที่กำหนเไว้ด้านบนให้แสดง Component Page1 */}
      </Switch>
    </HashRouter>
</>
);
}

export default App;

ผลลัพธ์ที่ได้คือ

หากเราต้องการเพิ่มเมนู หรือแก้ไข ้ข้อความ header เราสามารถเพิ่มได้ในเมนู ในไฟล์ master_page.js แล้วทั้งหน้า page1 กับ page2 ก็จะเปลี่ยนตาม

เนื้อหาถัดไป ReactBootrap ตอน 2 การสร้างเมนูด้านข้างด้วย ReactBootrap และการใช้งานร่วมกับ react-router-dom

fb_ads

ReactBootrap ตอน 1 การสร้าง Master Page และ ตัวอย่างการใช้งาน react-router-dom ใน ReactBootrap