การทำ Singel Page Application โดยใช้ React นั้นเราใช้ React DOM Router ในการจัดการหน้าใน ReactJS และการสร้าง Web Application โดย React นั้นการ CSS Framework ที่สวยงามและเป็นที่นิยมอย่าง React Material UI จะช่วยให้เราประหยัดเวลาในการออกแบบ ในบทความนี้จะแสดงตัวอย่างการใช้งานร่วมกันของ React Router DOM และ React Material UI
หมายเหตุ ตัวอย่างนี้ใช้ react-router-dom version 5.2.0 ซึ่งตอนนี้มี version react-router-dom ใหม่แล้ว
บทความที่เกี่ยวข้อง ตัวอย่างการใช้งาน React Router DOM ใน React Material UI ตอน 2 ( การส่งค่า Parameter ไปกับ URL)
1. สร้าง Project และ install package ต่างๆ
เปิด Command Line และพิมพ์คำสั่ง npm create-react-app sample_react_dom_router
2. install package material ui โดยพิมพ์
cd sample_react_dom_router
npm install @material-ui/core --save
npm install @material-ui/icons --save
3. install package React DOM Router โดยพิมพ์
npm install react-router-dom --save
4. เปิด Visual Studio Code โดยพิมพ์ . code
5. แก้ Code ใน ไฟล์ src/App.jsดังนี้
ดูตัวอย่างได้ที่ https://codesandbox.io/s/hardcore-saha-8qo2h?file=/src/App.js
import React from "react";
//เรียกใช้ Object ใน react-router-dom
import {
HashRouter,
Switch,
Route,
useParams,
useHistory
} from "react-router-dom";
//เรียกใช้ Object ใน material-ui
import Menu from "@material-ui/icons/Menu";
import {
createTheme,
makeStyles,
ThemeProvider
} from "@material-ui/core/styles";
import {
Slide,
Drawer,
Toolbar,
AppBar,
Typography,
IconButton,
List,
ListItem,
ListItemText,
Divider
} from "@material-ui/core/";
//กำหนดสีของ Application
const theme = createTheme({
palette: {
primary: {
main: "#ff5722"
},
secondary: {
main: "#ff9100"
}
}
});
const drawerWidth = 250;
//กำหนด CSS Class ต่างๆ
const useStyles = makeStyles((theme) => ({
root: {
display: "flex"
},
appBar: {
zIndex: theme.zIndex.drawer + 1
},
drawer: {
width: drawerWidth,
flexShrink: 0
},
drawerPaper: {
width: drawerWidth
},
drawerContainer: {
overflow: "auto",
paddingTop: theme.spacing(10)
},
content: {
flexGrow: 1,
padding: theme.spacing(10)
}
}));
//สร้าง Main Component ที่จะแสดงเมนูด้านข้าง
function Main(props) {
const classes = useStyles();
//กำหนด State การเปิดเมนู โดย open_menu ถ้ามีค่าเป็น True ให้แสดงเมนูด้านข้าง เป็น False ให้ซ่อนเมนูด้านข้าง
const [open_menu, set_open_menu] = React.useState(false);
//เรียกใช้ Object history จาก React DOM Router
const history = useHistory();
//สร้าง Function สำหรับเปลี่ยนหน้า
const change_page = (change_page) => {
history.push(change_page); //เปลี่ยนหน้าโดยใช้ Object history จาก React DOM Router ตามตัวแปร change_page
};
return (
<>
<ThemeProvider theme={theme}>
<div className={classes.root}>
{/*------สร้างเมนูด้านข้าง------*/}
<Slide direction="right" in={open_menu} mountOnEnter unmountOnExit>
<Drawer
className={classes.drawer}
variant="permanent"
classes={{
paper: classes.drawerPaper
}}
>
{/* ---รายการ เมนูข้าง--- */}
<div className={classes.drawerContainer}>
<List>
<ListItem
button
onClick={(event) => {
change_page(
"page1"
); /*กำหนดให้เปลี่ยนหน้าไปที่ path /page1 ตามที่กำหนดใน function App*/
}}
>
<ListItemText primary="Page1" />
</ListItem>
<ListItem
button
onClick={(event) => {
change_page(
"page2"
); /*กำหนดให้เปลี่ยนหน้าไปที่ path /page1 ตามที่กำหนดใน function App*/
}}
>
<ListItemText primary="Page2" />
</ListItem>
</List>
<Divider />
</div>
</Drawer>
</Slide>
{/*------สร้างแถบบาร์ด้านบน------*/}
<AppBar position="fixed" className={classes.appBar} color="primary">
<Toolbar>
{/*------สร้างปุ่มเปิดปิดเมนูด้านข้าง------*/}
<IconButton
edge="start"
className={classes.menuButton}
color="inherit"
aria-label="menu"
onClick={(event) => {
//ถ้า open_menu มีค่าเป็น True ให้เปลี่ยนเป็น False ( ปิดเมนู ข้าง )
if (open_menu) {
set_open_menu(false);
} else {
//ถ้า open_menu มีค่าเป็น False ให้เปลี่ยนเป็น True( เปิดเมนู ข้าง )
set_open_menu(true);
}
}}
>
<Menu />
</IconButton>
<Typography variant="h6" noWrap>
{/* แสดงชื่อของหน้าตาม Property page_name ที่ส่งมา */}
{props.page_name}
</Typography>
</Toolbar>
</AppBar>
<main className={classes.content}>
{/* แสดงเนื้อหาของหน้า */}
{props.children}
</main>
</div>
</ThemeProvider>
</>
);
}
function App(props) {
//----------สร้าง Router ------------
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>
</>
);
}
//---------กำหนด Component สำหรับหน้าต่างๆ ของ App------
function Page1() {
return (
<Main page_name="Page1">
<h3>Page1</h3>
</Main>
);
}
function Page2() {
return (
<Main page_name="Page2">
<h3>Page2</h3>
</Main>
);
}
export default App;
6. รันบน Browser โดยพิมพ์ npm run start ใน Command Line
ผลลัพธ์ที่ได้คือ
ถัดไป ตัวอย่างการใช้งาน React Router DOM ใน React Material UI ตอน 2 ( การส่งค่า Parameter ไปกับ URL)