简单易懂的React魔法(29):使用NavLink添加面包屑

CSS规则会让我们的页面看起来好看一些，同时我想增加几个基本的“面包屑”,让用户更容易的返回主页。

有几种不同的方式来做，除了使用牛x的 React-Breadcrumbs 组件。但是为了简单易懂，我们还是使用一些ReactRouter技巧，我们将采用你能想到的最基本的方法，在每个页面上打印出面包屑。https://github.com/svenanders/react-breadcrumbs(React Breadcrumbs)

为了使这些面包屑正常工作，你需要将下面这行添加在List.js Detail.js User.js文件头部。

src/pages/List.js, src/pages/Detail.js, src/pages/User.js

import { Link, NavLink } from 'react-router-dom'

你之前见过<Link>了，不过我有了新的<NavLink >，等会我给你看下他的用法。
我们先给Detail组件加如面包屑。修改其render方法:

src/pages/Detail.js

    render() {
        let content;

        if (this.state.mode === 'commits') {
            content = this.renderCommits();
        } else if (this.state.mode === 'forks') {
            content = this.renderForks();
        } else {
            content = this.renderPulls();
        }

        return (<div>
            <p>You are here: <NavLink to="/" activeClassName="active">Home</NavLink>
            > {this.props.match.params.repo}</p>
            <button onClick={this.selectMode.bind(this, 'commits')}>Show Commits</button>
            <button onClick={this.selectMode.bind(this, 'forks')}>Show Forks</button>
            <button onClick={this.selectMode.bind(this, 'pulls')}>Show Pulls</button>
            {content}
        </div>);
    }

只有You are here 这一行是新的，不过你会看到我使用了新的<NavLink >组件。保存文件然后访问Detail组件，你会发现有一行“You are here: Home > react” ，然后Home 点击之后可以回到主页。
那么<NavLink >和<Link>的区别在哪呢?

好吧，为了找出他们的区别，你试试把<NavLink to="/"activeClassName="active">Home</NavLink >改成<Link to="/" activeClassName="active">Home</Link>看看发生了什么，链接从蓝色变成黑色了。
这就是之前说的ReactRouter的小技巧，React Router 知道现在用户加载了哪个路由匹配的组件，并且会自动调整发现的任何Link组件，可以动态的改变标签状态。
为了弄明白发生了什么你该去看下css文件，我们之前在dist文件夹下写的：
dist/style.css

a.active {
    color: black;
}

现在回头看我们面包屑部分的代码:

src/pages/Detail.js

You are here: <NavLink to="/" activeClassName="active">Home</NavLink>
            > {this.props.match.params.repo}

看，CSS指定了class名为active的a标签的样式。<NavLink >组件的activeClassName属性设置a标签class为active。也就是说当React检测到我们正在查看这个链接时，它将activeClassName赋给这个标签的class属性。但是有个问题，我们的所有URL都是由’/’开始的，因为它是我们路由的根目录,可以通过添加exact关键字来让NavLink只在匹配到“/”时变为active状态。
List组件已经有显示“Please choose a repository from the list below”，所以剩下所需要的只是加上面包屑部分:

src/pages/List.js

<p>You are here: <NavLink to="/" activeClassName="active">Home</NavLink></p>

User组件有点难度，因为它的根元素是<ul>。我们需要先把他包装到一个<div>中，为了避免听不懂，新的render()方法如下:

src/pages/User.js

render() {
    return (<div>
        <p>You are here:
         <NavLink to="/" activeClassName="active">Home</NavLink>
        > {this.props.match.params.user}</p>
        <ul>
        {this.state.events.map((event, index) => {
            const eventType = event.type;
            const repoName = event.repo.name;
            const creationDate = event.created_at;

            return (<li key={index}><strong>{repoName}</strong>: {eventType}
                at {creationDate}.
            </li>);
        })}
        </ul>
    </div>);
}

好了面包屑也写完了。