此文仅通过后台管理系统登陆的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(<App />, 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 (
<Router>
<ul>
<li><Link to="/">登陆</Link></li>
<li><Link to="/index/">首页</Link></li>
</ul>
<Route path="/" exact component={LoginPage} />
<Route path="/index/" component={Index} />
</Router>
)
}
export default AppRouter
页面中,我们引入了react-router-dom中的3个组件,这里我们需要了解一下BrowserRouter,Route以及Link
-
BrowserRouter我们可以理解为路由器,为了使用方便起见,我们通过as重命名为Router -
Route我们可以理解是路由的线路,也就是我们的rul跳转后,需要显示内容的区块,通过path来拦截展示 -
Link可以理解为页面的a标签,用于跳转使用,配合to传递rul进行点击跳转.
路由功能已经实现了,我们要实现登陆页面跳转至首页,这里为了方便演示,我们在Router组件中,加入了一个有序列表,进行跳转.实际的登陆页是没有这一块内容的,只需要把无序列表删除即可,Route组件已经实现了url的拦截功能,并渲染component属性指向的组件
/pages/Login.js
import React, { Component } from 'react';
class Login extends Component {
constructor(props) {
super(props);
this.state = {}
}
render () {
return (
<div>这里是登录页</div>
);
}
}
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 (
<div className="index_box">这里是登陆后的首页</div>
);
}
}
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 (
<div className="index_index_box">
<Router>
<div className="index_top_box">
<div className="index_topbox_box1">
<div className="index_logobox">
<div className="logo"></div>
<div className="logoname">大汇云</div>
</div>
<div className="index_topbox_infobox">
<div>信息</div>
<div>语音</div>
<div>退出</div>
</div>
</div>
<div className="index_topbox_box2">
<ul className="minbox">
<li><Link to="/index/maillist/">企业通讯录</Link></li>
<li><Link to="/index/engineeringproject/">工程项目</Link></li>
<li><Link to="/index/business/">我的企业</Link></li>
<li><Link to="/index/setuppage/">设置管理</Link></li>
</ul>
</div>
</div>
<div className="index_body">
<Route path="/index/maillist/" component={MailList} />
<Route path="/index/engineeringproject/" component={EngineeringProject} />
<Route path="/index/business/" component={Business} />
<Route path="/index/setuppage/" component={SetupPage} />
</div>
<div className="pageinfo">© 2018 - 2019 DHwork ltc. All Rights Reserved</div>
</Router>
</div>
);
}
}
export default Index;
此时的目录结构:
image.png
此时,我们在'/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;
}
}
路由分别引入企业通讯录页面,工程项目页面,我的企业以及设置管理页面.
当点击顶部导航,下方的区域切换到对应的页面中,最终呈现样式,
image.png
