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"  />
          <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;
    }
}

效果：

　　　　　　

原文地址：https://www.cnblogs.com/mosquito18/p/9745656.html

时间： 2024-07-31 17:18:18

react-router-dom 实现左侧导航的相关文章

[原创]React+Ant Design设置左侧菜单导航路由的显示与隐藏（与权限无关）

最近在学习react时,用到了很流行的UI框架Ant Design,也了解了一下Ant Design Pro,发现它们都有导航组件,Ant Design框架的导航菜单在这里,Ant Design Pro是权限菜单,权限菜单简单来说就是根据登录的权限来展示不同的菜单给用户,比如管理员有给用户分配不同角色的权限,那管理员就可以看到系统管理等导航菜单,而用户A只有发布某些业务的权限,那用户A就不能看到系统管理的导航菜单等等.不过这不在我们本文的考虑范围内,有兴趣的同学可以自行去看它的API:Autho

[转] React Router 使用教程

你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系.想要发挥它的威力,整个技术栈都要配合它改造.你要学习一整套解决方案,从后端到前端,都是全新的做法. 举例来说,React 不使用 HTML,而使用 JSX .它打算抛弃 DOM,要求开发者不要使用任何 DOM 方法.它甚至还抛弃了 SQL ,自己发明了一套查询语言 GraphQL .当然,这些你都可以不用,React 照样运行,但是就发挥不出它的最大威力. 这样说吧,你只要用了 React,就会发现合理的选择就是,采用它的整个技术栈.

React漫漫学习路之 React Router

React Router 是一个基于 React 之上的强大路由库,它可以让你向应用中快速地添加视图和数据流,同时保持页面与 URL 间的同步. 目前react-router最新版本已经到4.0+,因为新的版本是一次非常大的改动,所以这里直接讨论4.0以上版本. 引用 react-router // React Router 核心 react-router-dom // 用于 DOM 绑定的 React Router react-router-native // 用于 React Native

最新的chart 聊天功能（ webpack2 + react + router + redux + scss + nodejs + express + mysql + es6/7）

请表明转载链接:http://www.cnblogs.com/zhangkunweb/p/6853728.html 我是一个喜欢捣腾的人,没事总喜欢学点新东西,可能现在用不到,但是不保证下一刻用不到. 我一直从事的是依赖angular.js 的web开发,但是我怎么能一直用它呢?看看最近火的一塌糊涂的reactjs ,我的天啊,不学会它,怎么能睡好觉. 今天我分享一个依赖最新版本的webpack + react + router + redux + scss + nodejs + mysql +

[React Router V4] Create Basic Routes with the React Router v4 BrowserRouter

React Router 4 has several routers built in for different purposes. The primary one you will use for building web applications is the BrowserRouter. In this lesson you will import the BrowserRouter and create some basic Route components. After create

简单的jquery左侧导航栏和页面选中效果

这里是要实现导航的左侧并选中的,此功能需引用jquery 效果: 左侧导航 <div class="box"> <ul class="menu"> <li class="level1"> <a href="#none" rel="external nofollow">衬衫</a> <ul class="level2">

React Router 基础组件一览

在 React Router 中有三种类型的组件:路由器组件,路由匹配组件,导航组件.这些组件都来自于 react-router-dom. 路由器 对于每一个 React Router 应用来说,都应该有一个路由器组件,它们会为应用创建一个专用的 history 对象.针对 Web 项目,react-router-dom 提供了 <BrowserRouter> 和 <HashRouter>. import { BrowserRouter } from 'react-router-d

关于react router 4 的小实践

详细代码栗子:https://github.com/wayaha/react-dom-CY clone然后 npm install npm start 分割线 1.这个项目使用create-react-app搭建: 首先需要安装好create-react-app npm install -g create-react-app 安装完毕之后就是搭建项目: create-react-app your-project-name cd your-project-name npm start 安装完成之后

[Web 前端] React Router v4 入坑指南

cp from : https://www.jianshu.com/p/6a45e2dfc9d9 万恶的根源 距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子做了升级,之前的路由用的还是v2.7.0版的,所以决定把路由也升级下,正好“尝尝鲜”... 江湖传言,目前官方同时维护 2.x 和 4.x 两个版本.(ヾ(??﹏?)??咦,此刻相信机智如我的你也会发现,ReactRouter v3 去哪儿了?整丢了??巴拉出锅了???敢不敢给我个完美的解释!?)事