react后台管理项目（一）

一、配置路由

1、下载相关依赖

npm i react-router-dom@6.22.2

路由配置必备，这里采用createBrowserRouter方法配置路由

2、router下index文件

import  {createBrowserRouter} from 'react-router-dom'
import Main from '../pages/main'
import Home from '../pages/home'

const routes = [
    {
        path:'/',
        Component: Main,
        children: [
            {
                path: 'home',
                Component: Home
            }
        ]
         
    }
]
export default createBrowserRouter(routes)

3、Main页面Main.js

import React from 'react'
import {Outlet} from 'react-router-dom'
const Main = () => {
    return (
        <div>
            main
            <Outlet />
        </div>
    )
}

export default Main 

4、 home页面home.js

import React  from 'react'

const Home = () =>{
    return(
    <div>
        home页面
    </div>
    );
}
export default Home

5、挂载到页面app.js

import './App.css';
import {RouterProvider} from 'react-router-dom'
import router from './router'

function App() {
  return (
    <div ClassName="app">
      <RouterProvider router={router}/>
    </div>

  );
}

export default App;

二、剩余页面路由配置和重定向功能实现

1.user页面实现，user下的js文件

import React from 'react'
const User = () => {
    return(
        <div>
            用户配置
        </div>
    );
}
export default User

2、mall页面实现，mall目录下的js文件

import React from 'react'
const Mall = () => {
    return (
        <div>
            mall页面
        </div>
    );

}
export default Mall

3、other页面下的内容实现

（1）、pageone页面

import React from 'react'
const PageOne = () => {
    return(
        <div>
        Pageone页面
    </div>

    );

}

export default PageOne

（2)、pagetwo页面实现

import React from 'react'
const PageTwo = () => {
    return(
        <div>
            pagetwo页面
        </div>
    );
}

export default PageTwo

4、重定向实现

添加跳转逻辑Navigate实现

{
    path: '/',
    element: <Navigate to="home" replace/>
}

router下index.js完整代码

import { createBrowserRouter, Navigate } from 'react-router-dom'
import Home from '../pages/home'
import Main from '../pages/main'
import User from '../pages/user'
import Mall from '../pages/mall'
import PageTwo from '../pages/other/pagetwo'
import PageOne from '../pages/other/pageone'

const routes =[
    {
        path: '/',
        Component: Main,
        children:[
            {
                path: '/',
                element: <Navigate to="home" replace/>
            },
            {
                path: 'home',
                Component: Home

            },
            {
                path: 'mall',
                component: Mall
            },
            {
                path: 'user',
                componnent: User
            },
            {
                path: 'other',
                children: [
                    {
                        path: 'pageone',
                        Component: PageOne
                        
                    },
                    {
                        path: 'pagetwo',
                        Component: PageTwo
                        
                    }
                ]
            }
        ]
    }
]

export default createBrowserRouter(routes)

三、layout布局组件引入和aside组件拆分

1、在antd网站上找到合适的布局模板，这里选择自定义触发器

将代码替换main,js

import React, { useState } from 'react';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from '@ant-design/icons';
import { Button, Layout, Menu, theme } from 'antd';
const { Header, Sider, Content } = Layout;
const Main = () => {
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  return (
    <Layout>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="demo-logo-vertical" />
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={['1']}
          items={[
            {
              key: '1',
              icon: <UserOutlined />,
              label: 'nav 1',
            },
            {
              key: '2',
              icon: <VideoCameraOutlined />,
              label: 'nav 2',
            },
            {
              key: '3',
              icon: <UploadOutlined />,
              label: 'nav 3',
            },
          ]}
        />
      </Sider>
      <Layout>
        <Header
          style={{
            padding: 0,
            background: colorBgContainer,
          }}
        >
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
            style={{
              fontSize: '16px',
              width: 64,
              height: 64,
            }}
          />
        </Header>
        <Content
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
          }}
        >
          Content
        </Content>
      </Layout>
    </Layout>
  );
};
export default Main;

网站展示如下：

2、引入样式进行渲染，同时增加h3标题样式

在sider组件下增加标题显示

<h3 className="app-name">通用后台管理系统</h3>

组件Menu增加样式,填充整个页面

style={{
  height: '100%'
}}

修改后显示