GitHub

• 丟上 Render

我要學50音

• 實作後的成果
• 隨著每天的更新都會變化唷唷～～

react-router-dom

• npm install react-router-dom

App.js

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import MainContent from "./layouts/MainContent";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="*" element={<MainContent />} />
      </Routes>
    </Router>
  );
}

export default App;

MainContent.js

import { Container } from "@mui/material";
import React from "react";
import Header from "./Header";
import RouteContent from "../route/RouteContent";

//
// IMPORT ZONE
//

function MainContent() {
  return (
    <Container maxWidth="xxl">
      <Header />
      <RouteContent />
    </Container>
  );
}

export default MainContent;

Header.js

import {
  AppBar,
  IconButton,
  Menu,
  MenuItem,
  Toolbar,
  Typography,
} from "@mui/material";
import React, { useState } from "react";
import MenuIcon from "@mui/icons-material/Menu";
import { AccountCircle } from "@mui/icons-material";
import { useNavigate } from "react-router-dom";
import { MenuObj } from "../shared/model/MenuObj";
//
// IMPORT ZONE
//

const Header = () => {
  const navigate = useNavigate();

  const [anchorEl, setAnchorEl] = useState(null);
  const handleMenuOnclick = (e) => {
    setAnchorEl(e.currentTarget);
  };

  const handleMenuOnClose = () => {
    setAnchorEl(null);
  };

  const go2YutingBlog = () => {
    window.open("https://yuting3656.github.io/yutingblog/");
  };

  const handleMenuOnClick = (url) => {
    navigate(url);
    handleMenuOnClose();
  };
  return (
    <AppBar position="static">
      <Toolbar>
        <IconButton
          size="large"
          edge="start"
          color="inherit"
          aria-label="menu"
          sx={{ mr: 2 }}
          onClick={(e) => handleMenuOnclick(e)}
        >
          <MenuIcon />
        </IconButton>
        <Typography
          variant="h6"
          component={"div"}
          sx={{ flexGrow: 1 }}
          style={{ cursor: "pointer" }}
          onClick={() => navigate("/dashboard")}
        >
          提姆要學 50 音{" "}
        </Typography>
        <IconButton
          size="large"
          aria-label="account of current user"
          aria-controls="menu-appbar"
          aria-haspopup="true"
          onClick={() => go2YutingBlog()}
          color="inherit"
        >
          <AccountCircle />
        </IconButton>
      </Toolbar>
      <Menu
        anchorEl={anchorEl}
        getContentAnchorEl={null}
        anchorOrigin={{ vertical: "bottom" }}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={() => handleMenuOnClose()}
      >
        {Object.keys(MenuObj).map((m, idx) => (
          <MenuItem key={idx} onClick={() => handleMenuOnClick(MenuObj[m].url)}>
            {m} - {MenuObj[m].name}
          </MenuItem>
        ))}
      </Menu>
    </AppBar>
  );
};

export default Header;

MenuObj.js

export const MenuObj = {
  day03: {
    url: "/day03",
    name: "Material UI",
  },
  day04: {
    url: "/day04",
    name: "給料（きゅうりょう）泥棒（どろぼう）",
  },
  day05: {
    url: "/day05",
    name: "放個 menu 吧！",
  },
  day06: {
    url: "/day06",
    name: "畫一些東西吧！",
  },
  day07: {
    url: "/day07",
    name: "看一下 a i u e o",
  },
  day08: {
    url: "/day08",
    name: "記錄每天的更新！",
  },
};

RouteContent.js

import { CircularProgress } from "@mui/material";
import React, { Suspense, lazy } from "react";
import { Route, Routes, Navigate } from "react-router-dom";

//
// IMPORT ZONE
//

const Dashboard = lazy(() => import("../components/dashboard/Dashboard"));
const Day03 = lazy(() => import("../components/day03/Day03"));
const Day04 = lazy(() => import("../components/day04/Day04"));
const Day05 = lazy(() => import("../components/day05/Day05"));
const Day06 = lazy(() => import("../components/day06/Day06"));
const Day07 = lazy(() => import("../components/day07/Day07"));
const Day08 = lazy(() => import("../components/day08/Day08"));

const RouteContent = () => {
  return (
    <>
      <Suspense fallback={<CircularProgress />}>
        <Routes>
          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/day03" element={<Day03 />} />
          <Route path="/day04" element={<Day04 />} />
          <Route path="/day05" element={<Day05 />} />
          <Route path="/day06" element={<Day06 />} />
          <Route path="/day07" element={<Day07 />} />
          <Route path="/day08" element={<Day08 />} />
          <Route path="/" element={<Navigate to="/dashboard" />} />
        </Routes>
      </Suspense>
    </>
  );
};

export default RouteContent;

Reference

• Material UI
• react-router