react-router-dom 实现左侧导航
1、介绍react-router-dom
https://reacttraining.com/react-router/web/example/basic 这个官网有很多栗子可以练手
1.1 HashRouter 和BrowserRouter
HashRouter 只能有一个子节点
<HashRouter>
<div>
<ul>
<li>
<Link to="/main">Home1</Link>
</li>
<li>
<Link to="/about">About1</Link>
</li>
</ul>
</div>
</HashRouter>
http://localhost:3000/#/admin/buttons //HashRouter是根路由
http://localhost:3000/admin/buttons //BrowserRouter，主要用于前后端分离的时候使用
1.2 Route
exact={true}精确匹配
<Route exact={true} path="/" component={Home} />
<Route path="/common" render={() =>
<Common>
<Route path="/common/order/detail/:orderId" component={OrderDetail} />
</Common>
}
/>
1.3 Link 导航
<div>
<ul>
<li>
<Link to="/main">Home1</Link>
</li>
<li>
<Link to="/about">About1</Link>
</li>
</ul>
</div>
to 实现路由跳转
to还可传对象
<Link to={{pathname:'/three/7'}}>Three #7</Link>
//一个基本的location对象
{pathname：'/',search:'',hash:'',key:'123',state:{}}
定义
<Route path="/three/:number" />
取值：
this.props.match.params.number
1.4 Switch 匹配多个路由
<Route path="/" render={()=>
<Admin>
<Switch>
<Route path='/home' component={Home} />
<Route path="/ui/buttons" component={Buttons} />
<Route path="/ui/modals" component={Modals} />
<Redirect to="/home" />、
</Switch>
</Admin>
} />
匹配到一个就不会往下执行
1.5 Redirect 路由重定向
<Redirect to="/home" />、
2、举栗子
2.1 简单例子
import React from 'react'
import {HashRouter , Route , Link, Switch} from 'react-router-dom'
import Main from './Main'
import About from './about'
import Topic from './topic'
export default class Home extends React.Component{ render(){
return (
<HashRouter>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/topics">Topics</Link>
</li>
</ul>
<hr/>
<Switch>
<Route exact={true} path="/" component={Main}></Route>
<Route path="/about" component={About}></Route>
<Route path="/topics" component={Topic}></Route>
</Switch>
</div>
</HashRouter>
);
}
}
2.2 嵌套子路由、获取动态路由、未匹配路由
Home.js
import React from 'react'
import { Link } from 'react-router-dom'
export default class Home extends React.Component { render() {
return (
<div>
<ul>
<li>
<Link to="/main">Home1</Link>
</li>
<li>
<Link to="/about">About1</Link>
</li>
<li>
<Link to="/topics">Topics1</Link>
</li>
<li>
<Link to="/mosquito1">mosquito1</Link>
</li>
<li>
<Link to="/mosquito2">mosquito2</Link>
</li>
</ul>
<hr />
{this.props.children}
</div>
);
}
}
router.js
import React from 'react'
import { HashRouter as Router, Route, Link, Switch} from 'react-router-dom'
import Main from './Main'
import Info from './info'
import About from './../route1/about'
import Topic from './../route1/topic'
import Home from './Home'
import NoMatch from './NoMatch'
export default class IRouter extends React.Component{ render(){
return (
<Router>
<Home>
<Switch>
<Route path="/main" render={() =>
<Main>
<Route path="/main/:value" component={Info}></Route>
</Main>
}></Route>
<Route path="/about" component={About}></Route>
<Route exact={true} path="/about/abc" component={About}></Route>
<Route path="/topics" component={Topic}></Route>
<Route component={NoMatch}></Route>
</Switch>
</Home>
</Router>
);
}
}
Main.js
import React from 'react'
import { Link } from 'react-router-dom'
export default class Main extends React.Component { render() {
return (
<div>
this is main page.
<br/>
<Link to="/main/test-id">嵌套路由1</Link>
<br/>
<Link to="/main/456">嵌套路由2</Link>
<hr/>
{this.props.children}
</div>
);
}
}
info.js
import React from 'react'
export default class Info extends React.Component { render() {
return (
<div>
这里是测试动态路由功能。
动态路由的值是：{this.props.match.params.value}
</div>
);
}
}
NoMatch.js
import React from 'react'
export default class Home extends React.Component { render() {
return (
<div>
404 No Pages.
</div>
);
}
}
注意：
<Home>
<Route path="/main" render={()=>
<Main>
<Route path="/main/a" component={About}></Route>
</Main>
}></Route>
<Route path="/about" component={About}></Route>
<Route path="/topics" component={Topic}></Route>
</Home>
1.render后的箭头函数不要加大括号，这样就不是返回了，而是执行里面的函数
2.有子路由的Route不能使用 exact={true} 精确匹配，不然子路由无法匹配
3.导入时可为HashRouter 取别名
import {HashRouter as Router,Route,LinK} from 'react-router-dom'
4.页面展示的内容通过 this.props.children
5.写动态子路由
<Route path="/main/:value" component={Info}></Route>
获取动态子路由
{this.props.match.params.value}
6.未匹配的路由
<Route component={NoMatch}></Route>
同时需要使用<Switch>标签，不然有子路由的算无法匹配而进入NoMatch组件
3、左侧导航栏
antd-design 有 Menu导航菜单，但是如果菜单栏的配置是后台给的话，需要遍历数据获取
首先配置router.js
<HashRouter>
<App>
<Switch>
<Route path="/login" component={Login}/>
<Route path="/common" render={() =>
<Common>
<Route path="/common/order/detail/:orderId" component={OrderDetail} />
</Common>
}
/>
<Route path="/" render={()=>
<Admin>
<Switch>
<Route path='/home' component={Home} />
<Route path="/ui/buttons" component={Buttons} />
<Route path="/ui/modals" component={Modals} />
<Route path="/ui/loadings" component={Loadings} />
<Route path="/ui/notification" component={Notice} />
<Route path="/ui/messages" component={Messages} />
<Route path="/ui/tabs" component={Tabs} />
<Route path="/ui/gallery" component={Gallery} />
<Route path="/ui/carousel" component={Carousel} />
<Route path="/form/login" component={FormLogin} />
<Route path="/form/reg" component={FormRegister} />
<Route path="/table/basic" component={BasicTable} />
<Route path="/table/high" component={HighTable} />
<Route path='/rich' component={Rich} />
<Route path="/city" component={City} />
<Route path="/order" component={Order} />
<Route path='/bikeMap' component={BikeMap} />
<Route path='/user' component={User} />
<Route path="/charts/bar" component={Bar} />
<Route path="/charts/pie" component={Pie} />
<Route path="/charts/line" component={Line} />
<Route path="/permission" component={Permission} />
<Redirect to="/home" />
{/* <Route component={NoMatch} /> */}
</Switch>
</Admin>
} />
</Switch>
</App>
</HashRouter>
menuConfig.js文件
const menuList = [
{
title: '首页',
key: '/home'
},
{
title: 'UI',
key: '/ui',
children: [
{
title: '按钮',
key: '/ui/buttons',
},
{
title: '弹框',
key: '/ui/modals',
},
{
title: 'Loading',
key: '/ui/loadings',
},
{
title: '通知提醒',
key: '/ui/notification',
},
{
title: '全局Message',
key: '/ui/messages',
},
{
title: 'Tab页签',
key: '/ui/tabs',
},
{
title: '图片画廊',
key: '/ui/gallery',
},
{
title: '轮播图',
key: '/ui/carousel',
}
]
},
{
title: '表单',
key: '/form',
children: [
{
title: '登录',
key: '/form/login',
},
{
title: '注册',
key: '/form/reg',
}
]
},
{
title: '表格',
key: '/table',
children: [
{
title: '基础表格',
key: '/table/basic',
},
{
title: '高级表格',
key: '/table/high',
}
]
},
{
title: '富文本',
key: '/rich'
},
{
title: '城市管理',
key: '/city'
},
{
title: '订单管理',
key: '/order',
btnList: [
{
title: '订单详情',
key: 'detail'
},
{
title: '结束订单',
key: 'finish'
}
]
},
{
title: '员工管理',
key: '/user'
},
{
title: '车辆地图',
key: '/bikeMap'
},
{
title: '图标',
key: '/charts',
children: [
{
title: '柱形图',
key: '/charts/bar'
},
{
title: '饼图',
key: '/charts/pie'
},
{
title: '折线图',
key: '/charts/line'
},
]
},
{
title: '权限设置',
key: '/permission'
},
];
export default menuList;
navleft.js
import React from "react";
import { Menu, Icon } from "antd";
import { NavLink } from "react-router-dom";
import MenuConfig from "./../../config/menuConfig";
import "./index.less";
const SubMenu = Menu.SubMenu;
export default class NavLeft extends React.Component { componentWillMount() {
const menuTreeNode = this.renderMenu(MenuConfig); this.setState({
menuTreeNode
});
}
// 菜单渲染
renderMenu = data => {
return data.map(item => {
if (item.children) {
return (
<SubMenu title={item.title} key={item.key}>
{this.renderMenu(item.children)}
</SubMenu>
);
}
return (
<Menu.Item title={item.title} key={item.key}>
<NavLink to={item.key}>{item.title}</NavLink>
</Menu.Item>
);
});
};
render() {
return (
<div>
<div className="logo">
<img src="/assets/logo-ant.svg" alt="" />
<h1>Imooc MS</h1>
</div>
<Menu onClick={this.handleClick} theme="dark">
{this.state.menuTreeNode}
</Menu>
</div>
);
}
}
navleft.less
.nav-left{
.logo{
line-height: 90px;
padding-left: 20px;
background-color: #002140;
img{
height: 35px;
}
h1{
color: #ffffff;
font-size: 20px;
display: inline-block;
vertical-align: middle;
margin: 0 0 0 10px;
}
}
}
admin.js
<Row className="container">
<Col span="4" className="nav-left">
<NavLeft/>
</Col>
<Col span="20" className="main">
<Header/>
<Row className="content">
{/* <Home/> */}
{this.props.children}
</Row>
<Footer/>
</Col>
</Row>
admin.less
.container{
.nav-left{
background-color:#001529;
color: #ffffff;
height: calc(100vh);
}
.main{
height: calc(100vh);
background-color: @colorL;
overflow: auto;
}
.content{
position: relative;
padding: 20px;
}
}
效果：
react-router-dom 实现左侧导航的更多相关文章
- React+Ant Design设置左侧菜单导航路由的显示与隐藏（与权限无关）
最近在学习react时,用到了很流行的UI框架Ant Design,也了解了一下Ant Design Pro,发现它们都有导航组件,Ant Design框架的导航菜单在这里,Ant Design Pr ...
- [转] React Router 使用教程
PS:react-route就是一个决定生成什么父子关系的组件,一般和layout结合起来,保证layout不行,内部的子html进行跳转 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系. ...
- React Router 4.x 开发，这些雷区我们都帮你踩过了
前言 在前端框架层出不穷的今天,React 以其虚拟 DOM .组件化开发思想等特性迅速占据了主流位置,成为前端开发工程师热衷的 Javascript 库.作为 React 体系中的重要组成部分:Re ...
- React Router教程
React Router教程 React项目的可用的路由库是React-Router,当然这也是官方支持的.它也分为: react-router 核心组件 react-router-dom 应用于浏览 ...
- React Router API文档
React Router API文档 一.<BrowserRouter> 使用HTML5历史记录API(pushState,replaceState和popstate事件)的<Rou ...
- React Router学习
React Router教程 本教程引用马伦老师的的教程 React项目的可用的路由库是React-Router,当然这也是官方支持的.它也分为: react-router 核心组件 react-ro ...
- React Router 4.0 体验
React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件.所以 RR4 只是一堆 提供了导航功能的组件(还有若干对象和方法),具有声明式(声明式编 ...
- 十七、React路由嵌套：头部导航+侧边导航
一.概述 实现功能:点首页,展示首页,同时在左侧有个首页的各个栏目导航:点用户,同首页: 二.代码实现 1. src/App.js import React from 'react'; import ...
- React Router基础使用
React是个技术栈,单单使用React很难构建复杂的Web应用程序,很多情况下我们需要引入其他相关的技术 React Router是React的路由库,保持相关页面部件与URL间的同步 下面就来简单 ...
随机推荐
- # 「NOIP2010」关押罪犯（二分图染色+二分答案）
「NOIP2010」关押罪犯(二分图染色+二分答案) 洛谷 P1525 描述:n个罪犯(1-N),两个罪犯之间的仇恨值为c,m对仇恨值,求怎么分配使得两件监狱的最大仇恨值最小. 思路:使最大xxx最小 ...
- C++实用模板 | 党办大活动计分
#include <iostream> #include <cmath> #include <cstring> #include <string> #i ...
- nginx配置ssi实现页面拆分
在做一个网站时,页面上会有很多重复的内容,每个页面写一遍很冗余,修改时还容易遗漏,所以可以把公共的部分写好,放在单独的HTML中,用时引用就行了. nginx配置ssi可以将单个页面拆分成一个一个的小 ...
- Volatile可见性 与 Synchronization原子性的优化
Volatile可见性 比如现在我们有这样一段代码:线程等待另一个线程将数据装载完就输出success,可是最后程序一直卡在while循环里没有往下执行. public class VolatileD ...
- docker 入门（1）
1,docker 的安装卸载 https://docs.docker.com/install/linux/docker-ce/ubuntu/ 2,docker中的基本概念 镜像(Image) 容器(C ...
- 查看Linux服务器硬件信息
一:查看cpu# 总核数 = 物理CPU个数 X 每颗物理CPU的核数 # 总逻辑CPU数 = 物理CPU个数 X 每颗物理CPU的核数 X 超线程数# 查看物理CPU个数cat /proc/cpui ...
- python之itertools
Python的内建模块itertools提供了非常有用的用于操作迭代对象的函数. count 创建一个迭代器,生成从n开始的连续整数,如果忽略n,则从0开始计算(注意:此迭代器不支持长整数) 如果超出 ...
- Mysql检查列是否存在并新增、修改、删除列
在MYSQL中,新增.修改.删除列时不能进行IF EXISTS判断,IF语句只能出现在存储过程当中,故博主用存储过程的方法新增.修改.删除列,修改列名称. DROP PROCEDURE IF EXIS ...
- Tensorflow源码编译常见问题点总结
Tensorflow源码编译分两种:一种是本地源码编译,另一种是针对ARM平台的源码编译． 接下来分别介绍: 一．本地编译 本地编译时,使用的编译工具是本地GCC. 一般会碰到以下问题: 第1个:ex ...
- 批量处理window下^M符号
#!/bin/ksh #set -x # #去掉文件中的^M 符号 # usage() { echo "Usage : sh ToAscll.sh [Option] [value]" ...