react项目实战教程(react项目实战)

文章目录项目实战前的准备工作项目实战一.搭建项目的基本页面及外层路由1-1配置基本页面1-2配置路由1-3需要最外层去渲染路由视图1-4需要配置内层App路由1-5路由的懒加载二.利用Antd实现组件2-1使用Antd的Layout进行布局2-2可以设计个Logo2-3实现左侧的菜单展示2-4实现左侧的小图标2-5实现点击菜单切换总结需要下载的组件项目实战前的准备工作React基础…

大家好,又见面了,我是你们的朋友全栈君。

项目实战前的准备工作

React基础
React组件
React-Router——Reac路由的学习
React高阶组件及CRA的定制
React中使用Antd组件

React项目实战(一)

React项目实战(二)

搭建项目的基本页面及外层路由

1-1配置基本页面

在项目根目录src文件下创建views文件夹
在这里插入图片描述
然后在views文件夹里创建所需要页面,
在相应文件夹下创建index.js文件,这样引入所需页面的时候直接写./login即可,不需要再写./login/index.js

  • article(index.js / Edit.js) 文章列表 文章编辑
  • dashboard(index.js) 仪表盘
  • login(index.js) 登录
  • settings(index.js) 设置
  • notfound(index.js) 404

在这里插入图片描述

  • 最后再创建views/index.js,并在文件里导出页面
import Article from "./article"      //文章列表
import ArticleEdit from "./article/Edit"//文章编辑
import Dashboard from "./dashboard"//仪表盘
import Login from "./login"//登录
import Notfound from "./notfound"//404
import Settings from "./settings"//设置

export { 
   
    Article,
    ArticleEdit,
    Dashboard,
    Login,
    Notfound,
    Settings
}

1-2配置路由

  • 安装路由:yarn add react-router-dom或者npm i react-router-dom
  • src文件下新建routes文件夹,在其下新建index.js文件并配置路由
    在这里插入图片描述
    routes/index.js
import  { 
   
    Article,
    ArticleEdit,
    Dashboard,
    Login,
    Notfound,
    Settings
} from "../views"   //引入页面


// /login 页面 /404 页面 
export const mainRoute = [
    { 
   
        pathname:"/login",
        component:Login
    },
    { 
   
        pathname:"/404",
        component:Notfound
    }
]


// /admin/XXX dashboard article articleEdit settings 管理页面
export const admainRoute = [
    { 
   
        pathname:"/admin/dashboard",
        component:Dashboard
    },
    { 
   
        pathname:"/admin/article",
        component:Article,
        exact:true  //配置App内置路由需要exact属性,详情见下文
    },
    { 
   
        pathname:"/admin/article/edit/:id",
        component:ArticleEdit
    },
    { 
   
        pathname:"/admin/settings",
        component:Settings
    },
]

1-3需要最外层去渲染路由视图

  • src/index.js文件里渲染路由视图
    在这里插入图片描述
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { 
   HashRouter as Router,Route,Redirect,Switch} from "react-router-dom"
import { 
   mainRoute} from "./routes"
ReactDOM.render(
  <Router>
    <Switch>
      <Route path="/admin" component={ 
   App}/> //admin主页面的路由 进入到App组件
      { 
   
        mainRoute.map(route=>{ 
   
          return <Route path={ 
   route.pathname} component={ 
   route.component}/>
        })
      }  //遍历login 404 的路由
      <Redirect to="/admin" from="/" exact/>  //重定向 首页为admin
      <Redirect to="/404" />		//如果路径与之前都不匹配,则返回404页面
    </Switch>
  </Router>
  ,
  document.getElementById('root')
);

1-4需要配置内层App路由

  • src/App.js文件里渲染路由视图
    在这里插入图片描述
import React, { 
    Component } from 'react'
import { 
   admainRoute} from "./routes"
import { 
   Route,Redirect,Switch} from "react-router-dom"
export default class App extends Component { 
   
  render() { 
   
    return (
      <Switch>
        { 
   
          admainRoute.map(route=>{ 
   
            return <Route path={ 
   route.pathname} component={ 
   route.component} exact={ 
   route.exact}/>
          })
        }   //admin页面里的路由 dashboard article articleEdit settings
        <Redirect to={ 
   admainRoute[0].pathname} from="/admin" exact/>  //重定向到 admin页面
        <Redirect to="/404" />
      </Switch> 
    )
  }
}
  • 后续发现了问题 /admin/article显示Article中的内容 但是/admin/article/edit/2的时候不显示ArticleEdit中的内容
    解决方法,直接在routes/index.js里面添加一个标志exact然后遍历路由的时候判断是否要添加exact属性
    { 
   
        pathname:"/admin/article",
        component:Article,
        exact:true
    },

    { 
   
              admainRoute.map(route=>{ 
   
                return <Route    exact={ 
   route.exact}/>
              })
    }

1-5 路由的懒加载

  • 下载react-loadable
    通过yarn add react-loadable安装
    在npm官网中搜索查阅使用方法
    在这里插入图片描述

  • 并新建src/component/loading/index.js文件,当懒加载未完成时,会显示该页面的内容
    在这里插入图片描述

  • 更改src/views/index.js文件

import Loadable from 'react-loadable';
import Loading from '../components/loading';
//需要将对外的普通组件需要进行懒加载
const Article = Loadable({ 
   
    loader: () => import('./article'),
    loading: Loading,
});
const Dashboard = Loadable({ 
   
    loader: () => import('./dashboard'),
    loading: Loading,
});
const ArticleEdit = Loadable({ 
   
    loader: () => import('./article/Edit'),
    loading: Loading,
});
const Login = Loadable({ 
   
    loader: () => import('./login'),
    loading: Loading,
});
const Notfound = Loadable({ 
   
    loader: () => import('./notfound'),
    loading: Loading,
});
const Settings = Loadable({ 
   
    loader: () => import('./settings'),
    loading: Loading,
});


export  { 
   
    Article,
    ArticleEdit,
    Dashboard,
    Login,
    Notfound,
    Settings
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/128605.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • php第三方登录(微博登录,仿照慕课网)

    php第三方登录(微博登录,仿照慕课网)

    2021年10月25日
  • 无线VLAN作用[通俗易懂]

    无线VLAN作用[通俗易懂]将一个AP放置在办公网,可以收到相当多的广播帧,也会转发出相当多的广播帧。转发出去的广播帧主要来自于有线端,这些大部分是没有用的。但对AP的性能消耗是很大的。解决办法有:1.驱动层过滤掉广播帧,防止接收广播帧消耗性能。包括PROBEREQUEST广播帧都可以不处理。只通过STA收听AP的BEACON帧完全就可以实现发现AP的作用了。2.构建单独的无线VLAN。

  • Node入门教程(11)第九章:Node 的网络模块

    Node入门教程(11)第九章:Node 的网络模块

  • 用Protel 99 SE学习原理图的设计及pcb的绘制

    用Protel 99 SE学习原理图的设计及pcb的绘制学习Protel99SE的大致过程:原理图文件(*.Sch)–>网络表文件(*.NET)–>*.PCB 网络表文件:记录封装格式。 (封装是指元件的长宽、大小、位置。封装就是一种标准,用来规定元件制造出的实际大小) Pcb文件:它就是印制电路板的文件 protel软件:https://download.csdn….

  • 使用tcpdump抓包分析网络请求_抓包报文分析

    使用tcpdump抓包分析网络请求_抓包报文分析tcpdump是一个用于截取网络分组,并输出分组内容的工具,简单说就是数据包抓包工具。tcpdump凭借强大的功能和灵活的截取策略,使其成为Linux系统下用于网络分析和问题排查的首选工具。tcpdump提供了源代码,公开了接口,因此具备很强的可扩展性,对于网络维护和入侵者都是非常有用的工具。tcpdump存在于基本的Linux系统中,由于它需要将网络界面设置为混杂模式,普通用户不能正常执行,但具备root权限的用户可以直接执行它来获取网络上的信息。因此系统中存在网络分析工具主要不是对本机安全的威胁,而是对

    2022年10月14日
  • 时间轮详解

    时间轮详解转载自:https://blog.csdn.net/paxhujing/article/details/52066620问题引入:游戏里面每个Player身上有很多buffs,在每一个tick(最小时间段)都要去检查buff里面的每一个buff是不是过期,产生的效果如何,造成在每个tick里面都去遍历一个长list,明显很不好。怎么优化?1.原始模型:buff的状态在每一个tick里面都要更新!可…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号