用react实现router路由

说明：
用react实现router路由
效果图：

step0:项目结构图：

my-react-app/
├── public/                  # 静态资源
│   ├── favicon.ico
│   └── robots.txt
├── src/
│   ├── assets/             # 静态资源
│   ├── pages/              # 页面组件
│   │   ├── Home.jsx           # 首页模块
│   │   └── User.jsx         # 用户模块
│   ├── App.jsx
│   └── main.jsx

step1:C:\Users\wangrusheng\PycharmProjects\untitled16\src\main.jsx

// src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import App from './App.jsx'
import './index.css'ReactDOM.createRoot(document.getElementById('root')).render(<React.StrictMode><BrowserRouter><App /></BrowserRouter></React.StrictMode>
)

step2:C:\Users\wangrusheng\PycharmProjects\untitled16\src\App.jsx

// App.jsx
import { NavLink, Routes, Route, Navigate } from 'react-router-dom'
import Home from './pages/Home'
import User from './pages/User'
import './App.css' // 新增 CSS 文件export default function App() {return (<div className="app-container">{/* 左侧导航 */}<div className="sidebar"><h2>路由列表</h2><nav><NavLinkto="/home"className={({ isActive }) =>`nav-link ${isActive ? 'active' : ''}`}>首页</NavLink><NavLinkto="/user"className={({ isActive }) =>`nav-link ${isActive ? 'active' : ''}`}>用户中心</NavLink></nav></div>{/* 右侧内容 */}<div className="content"><Routes><Route path="/" element={<Navigate to="/home" />} /><Route path="/home" element={<Home />} /><Route path="/user" element={<User />} /></Routes></div></div>)
}

step3:C:\Users\wangrusheng\PycharmProjects\untitled16\src\App.css

/* App.css */
.app-container {display: flex;min-height: 100vh;
}.sidebar {width: 200px;background-color: #f5f5f5;padding: 20px;border-right: 1px solid #ddd;
}.sidebar h2 {margin-bottom: 1rem;color: #333;
}.nav-link {display: block;padding: 10px;text-decoration: none;color: #333;border-radius: 4px;margin-bottom: 8px;transition: all 0.3s ease;
}/* 鼠标悬停效果 */
.nav-link:hover {background-color: #e0e0e0;
}/* 选中状态 */
.nav-link.active {background-color: #4CAF50;color: white !important;
}.content {flex: 1;padding: 20px;background-color: white;
}

step4:C:\Users\wangrusheng\PycharmProjects\untitled16\src\pages\User.jsx

// src/pages/User.jsx
export default function User() {return (<div><h2>用户中心</h2><p>Hello World from User!</p></div>)
}

step5:C:\Users\wangrusheng\PycharmProjects\untitled16\src\pages\Home.jsx

// src/pages/Home.jsx
export default function Home() {return (<div><h2>首页内容</h2><p>Hello World from Home!</p></div>)
}

end