[React]mui導覽列&路由設定

 

React的概念以及學習可直接前往官網，官網有很棒的學習指南只要跟著步驟就可輕鬆入門。

這篇主要是示範如何使用mui和Router開發出可切頁的網站，範例程式碼可參考這裡。

先在clientapp/src/pages新增兩個頁面，分別是Home.tsx和About.tsx

//Home.tsx

-----------------------------------------------------------

export function Home() {

    return (

        <>

            <h1>Home Page</h1>

            <p>Welcome!</p>

        </>

    );

}

-----------------------------------------------------------

//About.tsx

-----------------------------------------------------------

export function About() {

    return (

        <>

            <h1>About Page</h1>

            <p>Welcome!</p>

        </>

    );

}

-----------------------------------------------------------

再開啟clientapp/src/app.tsx，改成下面的程式碼。

//App.tsx

-----------------------------------------------------------

import { BrowserRouter as Router, Route } from "react-router-dom";

import { Routes } from "react-router-dom";

import { About } from "./pages/About";

import { Home } from "./pages/Home";

import Box from "@mui/material/Box";

function App() {

    return (

        <Router>

            <Box sx={{ display: "flex" }}>

                <Box component="main" sx={{ flexGrow: 1, p: 3 }}>

                    <Routes>

                        {/* pages */}

                        <Route path="/" element={<Home />} />

                        <Route path="/About" element={<About />} />

                    </Routes>

                </Box>

            </Box>

        </Router>

    );

}

export default App;

-----------------------------------------------------------

這樣一個有路由的網站就做好了!可以跑跑看並且網址加上Home或About看看是否可以正確換頁。

說明一下剛加入的程式碼，Home.tsx和About.tsx是使用React Function Component實作，方法只要return JSX格式就可以顯示畫面。

而App.tsx內使用react-routre-dom來實現路由，先用BrowserRouter包住Routes，而Routes內就會註冊各頁面的路由模式，這邊使用最基本的path="/About"導向element的About頁面。(也有更進階的路由設定，但目前沒用到就暫不說明)

//Route撰寫範例

-----------------------------------------------------------

<Route path="/About" element={<About />} />

-----------------------------------------------------------

p.s. react-router-dom的路由方式是有順序性的比對，從第一個只要有比對到就會顯示該Elementm

頁面跟路由都完成了，接下來現在就來寫導覽列，先用最簡單的超連結方式去實現

在App.tsx內加入下方紅字部分

//App.tsx

-----------------------------------------------------------

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

import { Link} from "react-router-dom";

import { About } from "./pages/About";

import { Home } from "./pages/Home";

import Box from "@mui/material/Box";

function App() {

    return (

        <Router>

            <div>

                <Link to="/">Home</Link>

            </div>

            <div>

                <Link to="/About">About</Link>

            </div>

            <Box sx={{ display: "flex" }}>

                <Box component="main" sx={{ flexGrow: 1, p: 3 }}>

                    <Routes>

                        {/* pages */}

                        <Route path="/" element={<Home />} />

                        <Route path="/About" element={<About />} />

                    </Routes>

                </Box>

            </Box>

        </Router>

    );

}

export default App;

-----------------------------------------------------------

切換的連結就完成，點點看是否能夠成功切頁。

簡易的切頁完成了，再來就使用mui的Appbar實作漂亮的導覽頁。

先連到mui的appbar說明頁->傳送門

再來可以選擇自己喜歡的長相，範例使用Basic App bar

點選<>後再點選左側的TS，就會顯示程式碼

將程式碼微調之後寫入App.tsx，如下方紅字

//App.tsx

-----------------------------------------------------------

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

import { Link} from "react-router-dom";

import { About } from "./pages/About";

import { Home } from "./pages/Home";

import Box from "@mui/material/Box";

import AppBar from "@mui/material/AppBar";

import Toolbar from "@mui/material/Toolbar";

import IconButton from "@mui/material/IconButton";

import Typography from "@mui/material/Typography";

import Button from "@mui/material/Button";

import MenuIcon from '@mui/icons-material/Menu';

function App() {

    return (

        <Router>

            <Box sx={{ display: "flex" }}>

             <AppBar position="fixed">

                    <Toolbar>

                        <IconButton

                            size="large"

                            edge="start"

                            color="inherit"

                            aria-label="menu"

                            sx={{ mr: 2 }}

                        >

                            <MenuIcon />

                        </IconButton>

                        <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>

                            FirstReact

                        </Typography>

                        <Button color="inherit">

                            <Link to="/" style={{

                                color: "white"

                            }}>Home</Link>

                        </Button>

                        <Button color="inherit">

                            <Link to="/About" style={{

                                color: "white"

                            }}>About</Link>

                        </Button>

                    </Toolbar>

                </AppBar>

                <Box component="main" sx={{ flexGrow: 1, p: 3, pt: 5 }}>

                    <Routes>

                        {/* pages */}

                        <Route path="/" element={<Home />} />

                        <Route path="/About" element={<About />} />

                    </Routes>

                </Box>

            </Box>

        </Router>

    );

}

export default App;

-----------------------------------------------------------

這樣就有漂亮的導覽列了!馬上開啟偵錯看看效果如何

這樣做完就已經是一個完整的網頁，在美化一下就可以上線了!(想太多，連API都還沒串就想上線!)

下一篇就是要串接API去實作登入機制，也可以。