ตัวอย่างการใช้งาน React Router DOM ใน React Material UI ตอน 2 ( การส่งค่า Parameter ไปกับ URL)

จากบทความ  ตัวอย่างการใช้งาน 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

บทความที่เกี่ยวข้อง ตัวอย่างการใช้งาน 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