react_新手入门教程02-导航栏和面包屑

主题: 导航栏和一级菜单面包屑

导航栏和面包屑.gif

导航栏

导航栏作为通用组件,把它放在conponets文件夹下
并新起一个文件夹main,添加 header.js作为导航栏组件

//app/public/src/conponents

$ mkdir main
$ touch header.js style.css

编辑header及样式

//app/public/src/conponents/main/header.js

/**
 * Created by ocean on 18/3/1.
 */
import React from 'react';
import { Icon } from 'antd';
import { Link } from 'react-router-dom';
import './style.css';

export default () => {
  return (
    <div className="navbar">
      <ul mode="horizontal" className="barstyle">
        <li className="logostyle" key="logo">
          <Icon className="Iconstyle" type="api" />
          <a rel="noopener noreferrer" target="_blank">react · 学习平台</a>
        </li>
        <li key="全部">
          <Link to="/datasource?pageNum=1&pageSize=10">全部</Link>
        </li>
        <li key="精华">
          <Link to="/datasource?pageNum=1&pageSize=10">精华</Link>
        </li>
        <li key="分享">
          <Link to="/datasource?pageNum=1&pageSize=10">分享</Link>
        </li>
        <li key="问答">
          <Link to="/datasource?pageNum=1&pageSize=10">问答</Link>
        </li>
      </ul>
    </div>
  );
};

//app/public/src/conponents/main/style.css

/*header*/

.navbar {
  font-size: 14px;
  width: 100%; // height: 66px;
  background: #0f0f0f url(https://p1.pstatp.com/large/66be00066eb639694007) no-repeat center top;
}

.navbar li {
    display: inline-block;
    line-height: 48px;
}

.navbar ul li{
  margin: 0 20px;
}

.navbar ul li a{
    color: rgba(255, 255, 255, 0.7);
    position: relative;
    letter-spacing: .1rem;
}


.navbar ul li a:hover {
  color: rgba(255, 255, 255, 1);
}

.navbar ul li a:focus {
  text-decoration: none;
}

.navbar ul li:nth-child(2) img{
  vertical-align: middle;
}

.navbar ul li:nth-child(2) img a{
  font-size: 16px;
}

.barstyle {
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  background: transparent;
}
.logostyle {
  line-height: 66px;
  font-size: 18px;
}
.logostyle .Iconstyle {
  color: white;
  font-size: 32px!important;
  font-weight: 100;
  opacity: 0.7;
  vertical-align: middle;
  margin-right: 10px;
  transform: rotate(180deg);
}


.header-active{
  color:#fff;
}

在路由配置文件router.js中,引入常驻组件header
并修改布局及全局样式

//app/public/src/router.js

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

+ // 常驻组件
+ import Header from './components/main/header';
+ 
// 子组件
import Welcome from './pages/welcome';



 export default () => (
   <Router>
     <div>
-        <Switch>
-          {/* welcome */}
-          <Route exact path="/" component={Welcome} />
-        </Switch>
+      <Header/>
+      <div
+        className='main-contains'
+        style={{
+          minHeight: document.body.clientHeight,
+        }}
+      >
+          <Switch>
+            {/* welcome */}
+            <Route exact path="/" component={Welcome} />
+          </Switch>
+      </div>
     </div>
   </Router>
 );

全局样式

//app/public/src/index.css


@import '~antd/dist/antd.css';

/**
 * 全局样式
 */

 *{
   margin: 0;padding: 0;
   font-family: "Hiragino Sans GB","Microsoft YaHei","\9ED1\4F53",Helvetica,Arial,Tahoma,sans-serif;
 }

.main-contains{
  min-height:600px;
  margin:0 auto;
}

.main-contains .content-inner{
  margin: 10px 25px 25px 25px;
  min-height: 600px;
}


.breadcrumb-content .ant-breadcrumb {
  padding: 10px 0 10px 0;
  border-bottom: 1px solid #eee;
  margin: 15px 25px 15px 25px;
  font-size:13px;
}

.ant-table-pagination.ant-pagination {
  margin: 16px 15px;
}

把全局样式统一放在style文件下,便于管理

//app/public/src/index.css

$ mv index.css style

修改index.js引入全局样式的路径

 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
+import './style/index.css';
 import Router from './router';
 import registerServiceWorker from './registerServiceWorker';

导航栏组件完成

面包屑

注:这里暂时只介绍一级菜单面包屑

面包板作为通用组件,还是放在conponents文件夹中

//app/public/src/conponents

$ mkdir breadcrumb
$ cd breadcrumb
$ touch breadcrumbNameMap.js index.js

breadcrumbNameMap.js用于定义面包屑, 将路由的名称一一对应

//app/public/src/conponents/breadcrumb/breadcrumbNameMap.js

/**
 * 用于定义面包屑
 * 将路由的名称一一对应
 */

const breadcrumbNameMap = {
  '/all': '全部',
  '/good': '精华',
  '/share': '分享',
  '/ask': '问答',
};

module.exports = breadcrumbNameMap;

编辑面包屑组件

//app/public/src/conponents/breadcrumb/index.js

/**
 * 一级菜单面包屑
 */

import React from 'react';
import { Link, withRouter } from 'react-router-dom';
import { Breadcrumb, Icon} from 'antd';

import BreadcrumbNameMap from './breadcrumbNameMap';

const Bread = withRouter((props) => {
  //location 为浏览器默认的api
  const { location } = props;
  const breadcrumbNameMap = BreadcrumbNameMap;

  const url = location.pathname

  let isIndex = false;
  if ( url === '/') {
    isIndex = true;
  }

  const nameItem = breadcrumbNameMap[url]

  const breadcrumbItems = [(
    <Breadcrumb.Item key="home">
            <Link to=""><Icon type="home" /></Link>
        </Breadcrumb.Item>
    ),(<Breadcrumb.Item key={url}>
    <Link to={url}>
      {nameItem}
    </Link>
  </Breadcrumb.Item>)]

  return (
        isIndex ? null :
            <div className="breadcrumb-content">
                <Breadcrumb>
                    {breadcrumbItems}
                </Breadcrumb>
            </div>
  );
});

export default Bread;

注:这里的前端路由主要通过,浏览器默认的api location获取到的
在浏览器控制台输入下location就能👀到

最后在路由配置文件router.js引入breadcrumb组件
点击导航栏即可看到效果
最后在router.js引入面包屑组件即可

// 常驻组件
import Header from './components/main/header';
+import Breadcrumb from './components/breadcrumb';


// 子组件
import Welcome from './pages/welcome';

          minHeight: document.body.clientHeight,
        }}
      >
+         <Breadcrumb/>
          <Switch>
            {/* welcome */}
            <Route exact path="/" component={Welcome} />

资料参考:
https://ant.design/components/breadcrumb-cn/
http://www.ruanyifeng.com/blog/2015/03/react.html (demo3)

(完 待续...)