Material UI v5 + React：如何为导航组件添加页面跳转功能

从代码里的next-auth导入能看出你用的是Next.js，要实现导航项跳转，得结合Next.js的路由系统和MUI组件，具体修改如下：

步骤1：统一页面配置 #

把原来的字符串数组PAGES改成包含页面名称和对应路径的对象数组，方便后续维护：

const PAGES = [
  { name: "About", path: "/about" },
  { name: "Socials", path: "/socials" }
];

步骤2：修改DrawerComp.js #

导入Next.js的Link组件，让ListItemButton兼具MUI样式和路由跳转功能：

//DrawerComp.js
import React, { useState} from 'react'
import {Drawer, IconButton, List, ListItemButton, ListItemIcon, ListItemText} from '@mui/material';
import MenuIcon from '@mui/icons-material/Menu';
import Link from 'next/link'; // 新增导入

const PAGES = [
  { name: "About", path: "/about" },
  { name: "Socials", path: "/socials" }
];

const DrawerComp =()=>{
    const [openDrawer, setOpenDrawer]=useState(false);
    return (
        <React.Fragment>
            <Drawer PaperProps={{sx:{ width:240}}} open={openDrawer} onClose={()=>setOpenDrawer(false)}>
            <List>
                {
                    PAGES.map((page,index)=>(
                        <ListItemButton 
                            component={Link} // 指定用Link渲染组件
                            href={page.path} // 设置跳转路径
                            onClick={()=> setOpenDrawer(false)} 
                            key={index}
                        >
                            <ListItemIcon>
                                <ListItemText primary={page.name} />
                            </ListItemIcon>
                        </ListItemButton>
                    ))
                }
            </List>
            </Drawer>
            <IconButton onClick={()=>setOpenDrawer(!openDrawer)} > <MenuIcon/></IconButton>
        </React.Fragment>
    );
};

export default DrawerComp;

步骤3：修改navbar.js #

同样导入Link组件（或结合useRouter），实现桌面端Tab的跳转：

方式1：用Link直接渲染Tab（简洁版） #

//navbar.js
import { AppBar, Toolbar, IconButton, Typography, Stack, Button,Box, useMediaQuery, useTheme, Tabs, Tab } from "@mui/material"
import { useSession, signIn, signOut } from 'next-auth/react';
import React, { useState, useEffect } from "react";
import DrawerComp from "./DrawerComp";
import Link from 'next/link'; // 新增导入

const PAGES = [
  { name: "About", path: "/about" },
  { name: "Socials", path: "/socials" }
];

const Navbar = (props) => {
    const { data: session, status } = useSession();
    const [value, setValue] = useState();
    const theme = useTheme();
    const isMatch = useMediaQuery(theme.breakpoints.down('md'));

    return (
        <React.Fragment>
        <AppBar position='static'>
            <Toolbar>
                {
                    isMatch ?(
                        <>
                        <DrawerComp sx={{marginLeft: 4}}/>
                         <Box component="img" sx={{ height: 50, width: 50, mx:"auto"}}  alt='my_img' src='/static/images/my_img.png' />
                        </>
                    ) : (
                        <>
                    <Tabs textColor='#000' value={value} onChange={(e, newValue) => setValue(newValue)}>
                        {
                            PAGES.map((page,index) => (
                                <Tab 
                                    key={index} 
                                    label={page.name} 
                                    component={Link} // 指定用Link渲染
                                    href={page.path} // 设置跳转路径
                                />
                            ))
                        }
                    </Tabs>
                        </>
                    )
                }
            </Toolbar>
        </AppBar>
        </React.Fragment>
    )
}

export default Navbar;

方式2：用useRouter控制跳转（适合需额外逻辑场景） #

如果需要在跳转前做额外处理，比如验证权限，可以用useRouter：

//navbar.js
// 新增导入
import { useRouter } from 'next/router';

const Navbar = (props) => {
    // 新增路由实例
    const router = useRouter();
    const { data: session, status } = useSession();
    const [value, setValue] = useState();
    const theme = useTheme();
    const isMatch = useMediaQuery(theme.breakpoints.down('md'));

    return (
        <React.Fragment>
        <AppBar position='static'>
            <Toolbar>
                {
                    isMatch ?(
                        <>
                        <DrawerComp sx={{marginLeft: 4}}/>
                         <Box component="img" sx={{ height: 50, width: 50, mx:"auto"}}  alt='my_img' src='/static/images/my_img.png' />
                        </>
                    ) : (
                        <>
                    <Tabs 
                        textColor='#000' 
                        value={value} 
                        onChange={(e, newValue) => {
                            setValue(newValue);
                            // 跳转到对应页面路径
                            router.push(PAGES[newValue].path);
                        }}
                    >
                        {
                            PAGES.map((page,index) => (
                                <Tab key={index} label={page.name} />
                            ))
                        }
                    </Tabs>
                        </>
                    )
                }
            </Toolbar>
        </AppBar>
        </React.Fragment>
    )
}

说明 #

• 用Next.js的Link组件可以实现客户端跳转，避免页面刷新，符合Next.js的路由机制。
• 通过component={Link}让MUI组件直接继承Link的路由功能，同时保留原有样式和交互。

内容的提问来源于stack exchange，提问作者user19045363