From b4dbf651d8d76ea7ed3a460911dfd2e6daafcb5c Mon Sep 17 00:00:00 2001
From: "wenbo.dong" <wenbo.dong@qunar.com>
Date: Fri, 28 Jul 2017 21:16:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=9D=A2=E5=8C=85=E5=B1=91=E5=BC=82?=
 =?UTF-8?q?=E6=AD=A5=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/components/Breadcrumb/Breadcrumb.js | 57 ++++++++++++++++------
 1 file changed, 43 insertions(+), 14 deletions(-)

diff --git a/client/components/Breadcrumb/Breadcrumb.js b/client/components/Breadcrumb/Breadcrumb.js
index 527032f6..63278d46 100644
--- a/client/components/Breadcrumb/Breadcrumb.js
+++ b/client/components/Breadcrumb/Breadcrumb.js
@@ -1,36 +1,65 @@
 import './Breadcrumb.scss';
 import { withRouter, Link } from 'react-router-dom';
 import { Breadcrumb } from 'antd';
-// import { withRouter } from 'react-router';
+import axios from 'axios';
 import React, { Component } from 'react';
-// const breadcrumbNameMap = {
-//   '/group': '分组',
-//   '/apps/1': 'Application1',
-//   '/apps/2': 'Application2',
-//   '/apps/1/detail': 'Detail',
-//   '/apps/2/detail': 'Detail'
-// };
+
 @withRouter
 export default class BreadcrumbNavigation extends Component {
   constructor(props) {
     super(props);
+    this.state = {
+      // breadcrumb: [{name:'首页', path: '/'}],
+      hash: '',
+      breadcrumb: []
+    }
+  }
+  getBreadcrumb = (pathSnippets) => {
+    console.log(pathSnippets);
+
+    if (/['project'|'group'|'add-interface']/.test(pathSnippets)) {
+      const type = pathSnippets[0],
+        id = pathSnippets[1];
+      const params = {
+        type,
+        id
+      }
+      axios.get('/user/nav', {params: params}).then( res => {
+        console.log(res);
+      });
+    }
+  }
+  componentDidMount() {
+    this.setState({
+      hash: location.hash
+    })
+  }
+  shouldComponentUpdate = (nextProps, nextState) => {
+    // hash改变的时候才render
+    if (nextState.hash !== this.state.hash) {
+      return true;
+    } else {
+      return false;
+    }
   }
   render () {
     // 获取接口路径并分割
     const pathSnippets = location.hash.split('#')[1].split('/').filter(i => i);
-    const extraBreadcrumbItems = pathSnippets.map((_, index) => {
-      const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
+    this.getBreadcrumb(pathSnippets);
+    const extraBreadcrumbItems = this.state.breadcrumb.map((item, index) => {
+      // const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
+      console.log(index);
       return (
-        <Breadcrumb.Item key={url}>
-          <Link to={url}>
-            {url}
+        <Breadcrumb.Item key={item.path}>
+          <Link to={item.path}>
+            {item.name}
           </Link>
         </Breadcrumb.Item>
       );
     });
     const breadcrumbItems = [(
       <Breadcrumb.Item key="home">
-        <Link to="/">Home</Link>
+        <Link to="/">首页</Link>
       </Breadcrumb.Item>
     )].concat(extraBreadcrumbItems);
     if (pathSnippets.length) {