import './Breadcrumb.scss';
import { withRouter, Link } from 'react-router-dom';
import { Breadcrumb } from 'antd';
import axios from 'axios';
import PropTypes from 'prop-types'
import React, { Component } from 'react';
@withRouter
export default class BreadcrumbNavigation extends Component {
constructor(props) {
super(props);
this.state = {
// breadcrumb: [{name:'首页', path: '/'}],
hash: '',
breadcrumb: []
}
}
static propTypes = {
location: PropTypes.object
}
getBreadcrumb = (pathSnippets) => {
// 重置 state 中的 breadcrumb,防止重复渲染
this.setState({
breadcrumb: []
});
if (/project|group|add-interface/.test(pathSnippets[0])) {
let type = pathSnippets[0] === 'add-interface' ? 'interface' : pathSnippets[0],
id = pathSnippets[pathSnippets.length-1];
if (pathSnippets.includes('add-interface') && !pathSnippets.includes('edit')) {
type = 'project';
}
const params = { type, id };
axios.get('/api/user/nav', {params: params}).then( (res) => {
const data = res.data.data;
// 依次填入group/projec/interface
if (data.group_name) {
this.setState({
breadcrumb: this.state.breadcrumb.concat([{
name: data.group_name,
path: '/group/' + data.group_id
}])
});
}
if (data.project_name) {
this.setState({
breadcrumb: this.state.breadcrumb.concat([{
name: data.project_name,
path: '/project/' + data.project_id
}])
});
// '添加接口'页面:根据project_id获取面包屑路径,并在结尾追加"添加接口"
if (pathSnippets.includes('add-interface') && !pathSnippets.includes('edit')) {
this.setState({
breadcrumb: this.state.breadcrumb.concat([{
name: '添加接口',
path: '/add-interface/' + data.project_id
}])
});
}
}
if (data.interface_name && pathSnippets.includes('edit')) {
this.setState({
breadcrumb: this.state.breadcrumb.concat([{
name: data.interface_name,
path: '/add-interface/edit/' + data.interface_id
}])
});
}
});
} else if (pathSnippets[0] == 'user') {
this.setState({
breadcrumb: [{
name: '个人中心',
path: '/' + pathSnippets.join('/')
}]
});
}
}
componentDidMount() {
const pathSnippets = location.hash.split('#')[1].split('/').filter(i => i);
this.getBreadcrumb(pathSnippets);
this.setState({
hash: location.hash.split('#')[1]
})
}
componentWillReceiveProps(nextProps) {
// this.setState({
// hash: nextProps.location.pathname
// })
const pathSnippets = location.hash.split('#')[1].split('/').filter(i => i);
// console.log(nextProps.location.pathname, this.props.location.pathname);
if (nextProps.location.pathname !== this.props.location.pathname) {
// console.log('in');
this.getBreadcrumb(pathSnippets);
this.setState({
hash: nextProps.location.pathname
})
}
}
render () {
// console.log(this.state.hash);
const pathSnippets = location.hash.split('#')[1].split('/').filter(i => i);
// 获取接口路径并分割
// console.log(this.state);
const extraBreadcrumbItems = this.state.breadcrumb.map((item) => {
// const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
return (
{item.name}
);
});
const breadcrumbItems = [(
首页
)].concat(extraBreadcrumbItems);
if (pathSnippets.length) {
return (
{breadcrumbItems}
)
} else {
return ;
}
}
}