欢迎光临企业官网建站网站,提供自助建设系统平台服务

企业官网建站

专业为公司品牌推广建设网站

React-Router完成后台管理系统登陆功能

作者:jcmp      发布时间:2021-05-08      浏览量:0
此文仅通过后台管理系统登陆的demo来讲

此文仅通过后台管理系统登陆的demo来讲解React-Router的使用,通过React-Router来实现页面跳转功能。

一、安装依赖

安装 react-router-dom 依赖包

npm install --save react-router-dom。

二、页面使用

这里我们通过一个后台系统的路由功能来使用 react-router-dom 中的路由功能以及什么是 BrowserRouter , Route 和 Link 后台系统路由功能需求:

首先,我们需要设置一层顶级路由,用来控制页面的平级跳转功能.实现通过登录页跳转到管理首页 那么我们需要给 react 项目的入口文件 index.js 中 dom 节点挂载的就不是一个组件了,而是一个路由js(由于该组件只实现页面路由的分发,并不需要继承 component ,所以使用 function 也是可以的,我们通常称之为无状态组件).

index.js

import React from 'react'import ReactDOM from 'react-dom'import App from './AppRouter'ReactDOM.render(, document.getElementById('root'))。

js中挂在的 App 组件到页面节点 root 上,实际上我们是引入了一个 AppRouter 的js文件.用于分发路由功能。

AppRouter.js

import React from 'react'import { BrowserRouter as Router, Route, Link } from 'react-router-dom'import LoginPage from './pages/Login/Login'import Index from './pages/Index/index'function AppRouter () { return (

  • 登陆
  • 首页
)}export default AppRouter。

页面中,我们引入了 react-router-dom 中的3个组件,这里我们需要了解一下 BrowserRouter , Route 以及 Link。

路由功能已经实现了,我们要实现登陆页面跳转至首页,这里为了方便演示,我们在 Router 组件中,加入了一个有序列表,进行跳转.实际的登陆页是没有这一块内容的,只需要把无序列表删除即可, Route 组件已经实现了 url 的拦截功能,并渲染 component 属性指向的组件。

/pages/Login.js

import React, { Component } from 'react';class Login extends Component { constructor(props) { super(props); this.state = {} } render () { return (

这里是登录页
); }}export default Login;

/pages/Index.js

import React, { Component } from 'react';import { BrowserRouter as Router, Route, Link } from 'react-router-dom'class Index extends Component { constructor(props) { super(props); this.state = {} } render () { return (

这里是登陆后的首页
); }}export default Index;

三、页面子路由

当从登陆页跳转到管理首页的时候,顶部导航栏作为路由跳转按钮,下方的部分则作为路由子页面存在 管理首页 pages/index.js。

import React, { Component } from 'react';import { BrowserRouter as Router, Route, Link } from 'react-router-dom'import MailList from '../MailList/MailList.js'import EngineeringProject from '../EngineeringProject/EngineeringProject'import Business from '../Business/Business'import SetupPage from '../SetupPage/SetupPage'import './index.scss'class Index extends Component { constructor(props) { super(props); this.state = {} } render () { return (

大汇云
信息
语音
退出
  • 企业通讯录
  • 工程项目
  • 我的企业
  • 设置管理
© 2018 - 2019 DHwork ltc. All Rights Reserved
); }}export default Index;

此时的目录结构:

此时,我们在'/pages/Index'目录的下方建立一个scss文件,用于页面样式:

.index_index_box{ width:100%; background:rgba(234,235,239,1); .index_top_box { width:100%; height:74px; background: white; .index_topbox_box1{ display: flex; justify-content: space-between; width:100%; height:31px; border-bottom: 1px solid #F7F7F7; .index_logobox{ height:31px; width:150px; display:flex; .logo{ width:60px; height:31px; background: #346EFF; } .logoname{ padding: 0 10px; line-height:32px; font-size: 12px; color:rgba(0,6,25,1); } } .index_topbox_infobox{ padding-right: 42px; display:flex; justify-content: flex-end; width:300px; div{ margin-left:43px; line-height:32px; font-size:12px; cursor: pointer; } } } .index_topbox_box2{ width:100%; height:42px; .minbox{ margin: 0 auto; width:686px; height:42px; display:flex; justify-content: space-between; li{ list-style: none; } a{ line-height:42px; font-size:14px; color:rgba(0,6,25,.6); cursor: pointer; text-decoration: none; } } } } .index_body{ background: white; height: calc(100vh - 134px); margin: 20px auto; width:1200px; } .pageinfo{ text-align: center; color:rgba(0,6,25,.3); font-size:12px; }}

路由分别引入企业通讯录页面,工程项目页面,我的企业以及设置管理页面. 当点击顶部导航,下方的区域切换到对应的页面中,最终呈现样式,