Layout框架搭建

Layout 框架搭建

1. 创建布局 src\pages\Layout\Layout.tsx

import React from "react";
import { Outlet, NavLink } from "react-router-dom";

import "./Layout.scss";

function Layout() {
  return (
    <section id="container">
      <aside>
        <div>
          <NavLink to="/layout">控制台</NavLink>
        </div>
        <div>
          <NavLink to="/layout/user">用户</NavLink>
        </div>
      </aside>
      <section>
        <header>header</header>
        <main>
          <Outlet />
        </main>
      </section>
    </section>
  );
}

export default Layout;

2. 创建全局样式

#container {
  display: flex;
  width: 100vw;
  height: 100vh;

  aside {
    width: 200px;
    background-color: #ccc;
  }

  section {
    flex: 1;
    display: flex;
    flex-direction: column;

    header {
      background-color: aqua;
      height: 50px;
    }

    main {
      flex: 1;
      margin: 0;
    }
  }
}

3. App.tsx 引入

import { Routes, Route, NavLink } from "react-router-dom";

import Login from "./pages/Login/Login";
import User from "./pages/User/User";
import Home from "./pages/Home/Home";
import Layout from "./pages/Layout/Layout";

function App() {
  return (
    <>
      <Routes>
        <Route path="/layout" element={<Layout />}>
          {/* index 默认展示, 可以不写 path */}
          <Route index element={<Home />} />
          <Route path="user" element={<User />} />
        </Route>
      </Routes>
    </>
  );
}

export default App;

4. src\index.css 精简

body {
  margin: 0;
}