React + Vite 实现一个音乐网站（menu篇）

本文主要是介绍React + Vite 实现一个音乐网站（menu篇），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

众所周知，每个网站都有菜单…

1.建立component文件夹

内部创建menu文件夹，文件夹内创建index.jsx和index.scss
目录结构如下
在这里插入图片描述

2.代码的编写

1.解决思路：首先我们肯定是要搭建页面的，我将meun分为两部分一步份为logo，一部分为item
在这里插入图片描述
所以我们只需要一个大盒子内嵌套两个小盒子然后用flex布局确定位置就行，非常简单
那么如果只是简单的弄个样子肯定是不行的，作为一个优秀的前端应该去完善网站的交互。那么我这边是用hover来实现鼠标滑动到一个item就会显现下划线。这样用户既能知道当前是哪个item还能让页面更加美观。

index.jsx

import './index.scss'
import Icon from '../../assest/icon'
import {Link, BrowserRouter as Router, NavLink} from 'react-router-dom'
import {useState} from 'react'//至于这里引入的Icon是因为我想自己封装icon组件function Meun() {//改变菜单const MeunChange=(index)=>{setMeunIndex(index)}//meunIndexconst [meunIndex,setMeunIndex]=useState(0)return (<div className="allMeun"><div className="part-logo"><img src="../image/logo.png" alt="" /></div><div className="part-meunList"><NavLink to="/" className='meun'><div onClick={()=>MeunChange(0)}>Home</div></NavLink><NavLink to="/about" className='meun'><div onClick={()=>MeunChange(1)}>About Us</div></NavLink><NavLink to="/concert" className=