จากบทความ ตัวอย่างการใช้งาน React Router DOM ใน React Material UI ตอน 1 ที่แสดงตัวอย่างการใช้งาน React DOM Router ในบทความนี้จะแสดงตัวอย่างในการส่งค่า Paramether ไปกับ URL ว่าต้องทำอย่างไร โดยให้เปิด Code เดิมจากบทความที่แล้ว มาแก้ไขดังนี้
หมายเหตุ ตัวอย่างนี้ใช้ react-router-dom version 5.2.0 ซึ่งตอนนี้มี version react-router-dom ใหม่แล้ว
บทความที่เกี่ยวข้อง ตัวอย่างการใช้งาน React Router DOM ใน React Material UI ตอน 1
ตัวอย่าง Code https://codesandbox.io/embed/hopeful-fog-ln8k7?fontsize=14&hidenavigation=1&theme=dark
สีแดง คือ code ที่มีการเปลี่ยนแปลง
import React from "react";
//เรียกใช้ Object ใน react-router-dom
import { HashRouter, Switch, Route, useParams } 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);
//สร้าง Function สำหรับเปลี่ยนหน้า
const change_page = (change_page, param) => {
window.location = "#/" + change_page + "/" + param; //เปลี่ยนหน้าพร้อมส่ง praramether
};
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",
"p1"
); /*กำหนดให้เปลี่ยนหน้าไปที่ path /page1 และส่งค่า paramether "p1" ตามที่กำหนดใน function App*/
}}
>
<ListItemText primary="Page1" />
</ListItem>
<ListItem
button
onClick={(event) => {
change_page(
"page2",
"p2"
); /*กำหนดให้เปลี่ยนหน้าไปที่ path /page1 และส่งค่า paramether "p2" ตามที่กำหนดใน 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/:param" children={<Page1 />}></Route>
{/* สำหรับ Path /page1 ให้แสดง Component Page1 และส่งค่า Paramether โดยเก็บไว้ที่ตัวแปรชื่อ param */}
<Route path="/page2/:param" children={<Page2 />}></Route>
{/* สำหรับ Path /page2 ให้แสดง Component Page2 และส่งค่า Paramether โดยเก็บไว้ที่ตัวแปรชื่อ param */}
<Route path="*" children={<Page1 />}></Route>
{/* ถ้าไม่ตรงกับ path ตามที่กำหนเไว้ด้านบนให้แสดง Component Page1 */}
</Switch>
</HashRouter>
</>
);
}
//---------กำหนด Component สำหรับหน้าต่างๆ ของ App------
function Page1() {
//รับค่า Paramether ตามชื่อตัวแปร param ที่กำหนดไว้ใน Function App
let { param } = useParams();
return (
<Main page_name="Page1">
<h3>Page1</h3>
{/* ------ถ้ามีค่า Praramether ส่งมสให้แสดงค่า Paramether------- */}
{param != null ? <h4>Praramether : {param}</h4> : null}
</Main>
);
}
function Page2() {
//รับค่า Paramether ตามชื่อตัวแปร param ที่กำหนดไว้ใน Function App
let { param } = useParams();
return (
<Main page_name="Page2">
<h3>Page2</h3>
{/* ------ถ้ามีค่า Praramether ส่งมสให้แสดงค่า Paramether------- */}
{param != null ? <h4>Praramether : {param}</h4> : null}
</Main>
);
}
export default App;
ผลลัพธ์ที่ได้คือ
เมื่อเปลี่ยนหน้า จะแสดงค่า paramether ที่ส่งมาตาม URL
เนื้อหาถัดไป ReactBootrap ตอน 1 การสร้าง Master Page และ ตัวอย่างการใช้งาน react-router-dom ใน ReactBootrap