feat: 面包屑导航功能

This commit is contained in:
wenbo.dong 2017-07-30 15:06:03 +08:00
parent 9a880c0d3d
commit ea083184d6
3 changed files with 73 additions and 26 deletions

View File

@ -6,7 +6,7 @@ import { Home, ProjectGroups, Interface, News, AddInterface } from './containers
import User from './containers/User/User.js';
import Header from './components/Header/Header';
import Footer from './components/Footer/Footer';
import Breadcrumb from './components/Breadcrumb/Breadcrumb';
// import Breadcrumb from './components/Breadcrumb/Breadcrumb';
import Loading from './components/Loading/Loading';
import { checkLoginState } from './actions/login';
import { requireAuthentication } from './components/AuthenticatedComponent';
@ -50,7 +50,7 @@ export default class App extends Component {
<div className="router-main">
<Header />
<div className="router-container">
<Breadcrumb />
{/* <Breadcrumb /> */}
<Route path="/" component={Home} exact />
<Switch>
<Redirect exact from='/group' to='/group/1' />

View File

@ -2,6 +2,7 @@ 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
@ -14,41 +15,87 @@ export default class BreadcrumbNavigation extends Component {
breadcrumb: []
}
}
getBreadcrumb = (pathSnippets) => {
console.log(pathSnippets);
static propTypes = {
location: PropTypes.object
}
if (/['project'|'group'|'add-interface']/.test(pathSnippets)) {
const type = pathSnippets[0],
getBreadcrumb = (pathSnippets) => {
// 重置 state 中的 breadcrumb防止重复渲染
this.setState({
breadcrumb: []
});
if (/project|group|add-interface]/.test(pathSnippets[0])) {
const type = pathSnippets[0] === 'add-interface' ? 'interface' : pathSnippets[0],
id = pathSnippets[1];
const params = {
type,
id
}
axios.get('/user/nav', {params: params}).then( res => {
console.log(res);
const params = { type, id };
axios.get('/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
}])
});
}
if (data.interface_name) {
this.setState({
breadcrumb: this.state.breadcrumb.concat([{
name: data.interface_name,
path: '/project/' + data.interface_id
}])
});
}
});
} else if (pathSnippets[0] == 'user') {
this.setState({
breadcrumb: [{
name: '个人中心',
path: '/' + pathSnippets.join('/')
}]
});
} else {
console.log(2);
}
}
componentDidMount() {
console.log(location.hash);
const pathSnippets = location.hash.split('#')[1].split('/').filter(i => i);
this.getBreadcrumb(pathSnippets);
this.setState({
hash: location.hash
hash: location.hash.split('#')[1]
})
}
shouldComponentUpdate = (nextProps, nextState) => {
// hash改变的时候才render
if (nextState.hash !== this.state.hash) {
return true;
} else {
return false;
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);
this.getBreadcrumb(pathSnippets);
const extraBreadcrumbItems = this.state.breadcrumb.map((item, index) => {
// 获取接口路径并分割
// console.log(this.state);
const extraBreadcrumbItems = this.state.breadcrumb.map((item) => {
// const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
console.log(index);
return (
<Breadcrumb.Item key={item.path}>
<Link to={item.path}>

View File

@ -64,11 +64,11 @@ export default class GroupList extends Component {
if(this.props.groupList[i].group_name === groupName){
currGroup = this.props.groupList[i];
}else{
this.props.history.replace(`${currGroup.group_name}`);
this.props.history.replace(`${currGroup._id}`);
}
}
}else if(!groupName && this.props.groupList.length){
this.props.history.push(`/group/${this.props.groupList[0].group_name}`);
this.props.history.push(`/group/${this.props.groupList[0]._id}`);
}
this.setState({groupList: this.props.groupList});
this.props.setCurrGroup(currGroup)
@ -156,7 +156,7 @@ export default class GroupList extends Component {
const groupId = e.key;
const currGroup = this.props.groupList.find((group) => { return +group._id === +groupId });
this.props.setCurrGroup(currGroup);
this.props.history.replace(`${currGroup.group_name}`);
this.props.history.replace(`${currGroup._id}`);
}
@autobind