简单易懂的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'

你之前见过了，不过我有了新的，等会我给你看下他的用法。
我们先给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 (

            
You are here: Home
            > {this.props.match.params.repo}
            Show Commits
            Show Forks
            Show Pulls
            {content}
        
);
    }

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

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

a.active {
    color: black;
}

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

src/pages/Detail.js

You are here: Home
            > {this.props.match.params.repo}

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

src/pages/List.js

You are here: Home

User组件有点难度，因为它的根元素是

。我们需要先把他包装到一个
中，为了避免听不懂，新的render()方法如下:

src/pages/User.js

render() {
    return (

        
You are here:
         Home
        > {this.props.match.params.user}
        

        {this.state.events.map((event, index) => {
            const eventType = event.type;
            const repoName = event.repo.name;
            const creationDate = event.created_at;

            return (
{repoName}: {eventType}
                at {creationDate}.
            
);
        })}
        
    
);
}

好了面包屑也写完了。