react+antd导航栏布局例子

本文适用于用react+antd写一个如下导航栏布局

本例子实际效果如下

• 前期知识补充
  • css3中vh、vw的概念为了一些布局的自适应通常不能把一些值设成固定值，自己写的时候可以注意一下，写完自己缩放页面检查一下效果。
• 思路：
  在antd网站上找一个你想要的布局样式，然后拆分代码，将头部、导航栏、右部分别封装成组件，便于后面页面的调用（大项目需要进一步拆分封装，本项目只做了大致的模块封装），然后尝试在每个板块页面上引用每个部分的组件，在组件外需要适当按需搭建一下框架，使组件更好的被融合在一起。
• 具体步骤
  • 要完成搭建所用到的文件有：
    app.js（用来写点击导航栏跳转页面功能的实现）
    pages/各具体页面.js(x)+对应css/less（用来显示不同跳转后的页面样式，组件也是填充到这里）
    components/各组件文件.js(x)+对应css/less （将页面中公用的一些组件封装至此，其他的页面也可以便捷调用）
  • app.js（用来写点击导航栏跳转页面功能的实现）

import React, {
    Component } from 'react'
import {
    HashRouter,Route,Switch} from 'react-router-dom' 

import Home from './pages/home/home'
import Class from './pages/class/class'
import Docker from './pages/docker/docker'
import Feedback from './pages/feedback/feedback.jsx'
import AExperiment from './pages/experiment/aExperiment.jsx'
import SExperiment from './pages/experiment/sExperiment.jsx'

export default class App extends Component {
   
    render() {
   
        return (
            /**路由跳转 */
            <HashRouter>
                <Switch>
                    {
   /* 加exact使得一进'/'地址就加载home界面 */}
                    <Route path='/' component={
   Home} exact /> 
                    <Route path='/home' component={
   Home}/>
                    {
   /* path:网页路由  component:jsx文件中class名（首字母大写） */}
                    <Route path="/class" component={
   Class} />
                    <Route path="/docker" component={
   Docker} />
                    <Route path="/sExperiment" component={
   SExperiment} />
                    <Route path="/aExperiment" component={
   AExperiment} />
                    <Route path="/feedback" component={
   Feedback} /> 
                </Switch>
            </HashRouter>
        )
    } 
}

• home.jsx

import React, {
    Component } from "react";
import {
    Row,