React路由结合Material UI的ListItemButton组件完成导航示例

最新推荐文章于 2025-08-19 12:30:35 发布

原创

最新推荐文章于 2025-08-19 12:30:35 发布 · 755 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #ui #前端

React路由结合Material UI的ListItemButton组件完成导航示例

1、创建菜单列表NavigationList.jsx
2、App.js

1、创建菜单列表NavigationList.jsx

import React from 'react';
import {
   
    ListItemButton, ListItemText, List } from '@mui/material';
import {
   
    NavLink as RouterLink } from 'react-router-dom';

const items = [
    {
   
    id: 1, path: '/home', label: 'Home' },
    {
   
    id: 2, path: '/about', label: 'About' },
];
const NavigationList = () => {
   
   
    return (
        <div>
            <List>
                {
   
   items