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)
blank

相关推荐

  • flashfxp3.41中文版注册码:(适合最新版本)

    flashfxp3.41中文版注册码:(适合最新版本)推荐(尚未被封的Realkey)FLASHFXPvACq2ssbvAAAAAC1W7cJKQTzmx77zmqJICvA7d3WnUtWNXdrp8YuERRFdIvXfOPbcpABkVix2aRTgg6afcIKFPxS72XYljdE9tgQD/2r+kmfVBngGM4Qc9p7e0PcTfFF/1tt2bqlxS8r0L7z0jrqb5NSiPr…

  • 深入理解List的toArray()方法和toArray(T[] a)方法「建议收藏」

    深入理解List的toArray()方法和toArray(T[] a)方法「建议收藏」深入理解List的toArray()方法和toArray(T[]a)方法这两个方法都是将列表List中的元素转导出为数组,不同的是,toArray()方法导出的是Object类型数组,而toArray[T[]a]方法导出的是指定类型的数组。下面是两个方法的申明及说明,摘自Java8的API文档。toArray()方法的分析Object[]toArray()Returnsan…

  • python的enumerate函数怎么加判断条件_java中比int大的整数类型

    python的enumerate函数怎么加判断条件_java中比int大的整数类型Python的enumerate()函数就像是一个神秘的黑箱,你无法简单地用一句话来概括这个函数的作用与用法。enumerate()函数属于非常有用的高级用法,而对于这一点,很多初学者甚至中级学者都没有意识到。这个函数的基本应用就是用来遍历一个集合对象,它在遍历的同时还可以得到当前元素的索引位置。我们看一个例子:names=[“Alice”,”Bob”,”Carl”]forindex,valueinenumerate(names):print(f'{index}:{va

    2022年10月24日
  • mysql数据库创建、删除数据库

    mysql数据库创建、删除数据库

    2021年10月15日
  • Apifox(2)快速上手apifox[通俗易懂]

    Apifox(2)快速上手apifox[通俗易懂]快速上手使用场景Apifox是接口管理、开发、测试全流程集成工具,使用受众为整个研发技术团队,主要使用者为前端开发、后端开发和测试人员。前端开发接口文档管理接口数据Mock接口调试前

  • Qt多线程1:QThread

    Qt多线程1:QThreadQt有两种多线程的方法,其中一种是继承QThread的run函数,另外一种是把一个继承于QObject的类转移到一个Thread里。Qt4.8之前都是使用继承QThread的run这种方法,但是Qt4.8之后,Qt官方建议使用第二种方法。两种方法区别不大,用起来都比较方便,但继承QObject的方法更加灵活。这里要记录的是如何正确的创建一个线程,特别是如何正确的退出一个线程。

发表回复

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

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