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

 การทำ 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 ใหม่แล้ว

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

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