React导航栏效果（antd+react router4.0）

1、演示效果

最上面的部分为导航插件。

2、具体代码与介绍

2.1 Reactjs首次加载与路由页面

2.1.1 index.js首次加载

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import RouterIndex from './routers/index.js';

import registerServiceWorker from './registerServiceWorker';
//引入了<RouterIndex/>控件，即路由页面
ReactDOM.render(<RouterIndex />, document.getElementById('root'));
registerServiceWorker();

2.1.2 React Router4.0的index页面（<RouterIndex/>页面）

import React, { Component } from 'react';
import { Provider } from 'react-redux'
import {BrowserRouter } from 'react-router-dom';
import { Router, Route } from 'react-router'

import  App from '../components/App.js'
import  Home from '../components/Home.js'
import  Foo from '../components/Foo.js'
import  Bar  from '../components/Bar.js'

export default class RouterIndex extends Component {
  render() {
    return ( 
          <BrowserRouter>
            <App path="/App" component={App}>
              <Route path="/App/home" component={Home} />
              <Route path="/App/foo" component={Foo} />
              <Route path="/App/bar" component={Bar} />
            </App>
          </BrowserRouter>
    )
  }
}

2.2面包屑导航页面

import React, { Component } from 'react';
import { Breadcrumb, Switch, Icon } from 'antd';
import { Link } from 'react-router-dom';
import PropTypes from "prop-types";
//具体导航的名称
const breadcrumbNameMap = {
    '/App': '首页',
    '/App/home': 'home页面',
    '/App/foo': 'foo页面',
    '/App/bar': 'bar页面',
};
class BreadcrumbCustom extends Component {
    //利用PropTypes记住所跳转每个页面的位置 
    static contextTypes = {
        router: PropTypes.object
    }
    constructor(props, context) {
        super(props, context);
        this.state = {
            pathSnippets: null,
            extraBreadcrumbItems: null
        }
    }
    getPath() {
	//对路径进行切分，存放到this.state.pathSnippets中
        this.state.pathSnippets = this.context.router.history.location.pathname.split('/').filter(i => i);
	//将切分的路径读出来，形成面包屑，存放到this.state.extraBreadcrumbItems
        this.state.extraBreadcrumbItems = this.state.pathSnippets.map((_, index) => {
            const url = `/${this.state.pathSnippets.slice(0, index + 1).join('/')}`;
            console.log('url')
            console.log(url)
            return (
                <Breadcrumb.Item key={url}>
                    <Link to={url}>
                        {breadcrumbNameMap[url]}
                    </Link>
                </Breadcrumb.Item>
            );
        });
    }

    componentWillMount() {
	//首次加载的时候调用，形成面包屑
        this.getPath();
    }
    componentWillReceiveProps(){
	//任何子页面发生改变，均可调用，完成路径切分以及形成面包屑
        this.getPath();
    }
    render() {
        return (

            <span>
                <Breadcrumb style={{ margin: '12px 0' }}>
		     //将形成的面包屑引用进来，即可完成如图所示的动画效果
                    {this.state.extraBreadcrumbItems}
                </Breadcrumb> 
            </span>
        )
    }
}
export default BreadcrumbCustom;

PS：参考antd面包屑的使用文档：https://ant.design/components/breadcrumb-cn/

2.3具体页面引用

2.3.1 app页面（首页，因此需要引用面包屑）

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import BreadcrumbCustom from './BreadcrumbCustom';
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      increase: 'none',
    }
  }

  render() {
    return (
      <div>
        <BreadcrumbCustom />
        <div>
          Links:
          <br/>
          <Link to="/App/home">Home</Link>
          <br/>
          <Link to="/App/foo">Foo</Link>
          <br/>
          <Link to="/App/bar">Bar</Link>
          <br/>
          <button onClick={() => {
            this.context.router.history.push("/App/foo");
          }}>Go to /App/foo</button>
        </div>
        <div style={{ marginTop: '1.5em' }}>{this.props.children}</div>
      </div>
    )
  }
}

2.3.2 以bar页面作为子页面为例

import React, { Component } from 'react';

export default class Bar extends Component {

  render() {
    return <div>And I am Bar!</div>
  }
}

子页面不需要做任何操作，面包屑导航，仅需要最顶层的父页面引入即可。

3、结束语

利用antd组件库中Breadcrumb作为组件，利用react router4.0中提供的history记住路径，实现了整个页面的导航跳转功能。