react学习日记（二）

---

前言

路由配置，导航栏的使用

---

一、路由配置

1.App.js

import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import Demo01_button from './pages/demo01_button';
import Demo02_menu from './pages/demo02_menu';
import './App.css'
function App() {
  return (
    <BrowserRouter>
    <div>
      <h1>My Website</h1>
      <Routes>
        {/* 默认重定向到Demo01_button */}
        <Route path="/" element={<Navigate to="/Demo01_button" replace />} />
        <Route path="/demo01_button" element={<Demo01_button />} />
        <Route path="/demo02_menu" element={<Demo02_menu />} />
      </Routes>
    </div>
  </BrowserRouter>
  );
}

export default App;

2.效果

---

二、导航栏的使用

1.App.js

const items3 = [
    {
      label: '导航栏1',
      key: 'mail1',
      icon: <MailOutlined />,
    },
    {
      label: '导航栏2',
      key: 'mail2',
      icon: <AppstoreOutlined />,
      disabled: true,
    },
    {
      label: '导航栏3',
      key: 'mail3',
    },
    {
      label: '导航栏4',
      key: 'mail4',
    },
  ]
{/* mode="horizontal"：这个属性设置菜单的布局模式为水平。 */}
      <Menu onClick={dhlClick} selectedKeys={[current]} mode="horizontal" items={items3} />

2.效果

总结

提示：以上就是react的路由和导航栏的基本使用