第06节、路由：NavLink中的常用选项

上一节，初步使用了 React 路由。这节是针对 NavLink 标签上的选项。

Route和NavLink的exact选项

上一节中，代码中有一个 exact 选项。这个是精确匹配使用，一般而言React会匹配所有能匹配的路由组阶，exact可以使我们的匹配更精确。exact的值为bool型，为true是表示严格匹配，为false时为正常匹配。

1 2 3

<Route  path="/" component={Jscomponent} /> <Route  path="/Jscomponent" component={Jscomponentb} /> //这种情况下，输入路由"/Jspangb",会把Jspang组件也展示出来

所以我们经常使用exact来解决这个问题。

1 2	<Route  exact  path="/"  component={Jscomponent} /> <Route  path="/Jscomponentb" component={Jscomponentb} />

在多层路由（路由嵌套）时也会出现这个问题，所以要多使用exact来解决精确匹配问题。

NavLink使用样式

如果我们想给路由一个样式，这时候我们写了一个CSS文件，我们如何才能使用在NavLink上？其实这并不难，不过要配置一下webpack.config.js文件。

先写一个CSS文件，并放在和nav.js一个文件夹下,命名为nav.css。

nav.css

1 2 3

.blue{     color:blue; }

然后用es6的import方法引入到nav.js组件里。

这时还不能正确出现效果，因为webpack还不能对CSS文件进行正确的解析，需要我们加入CSS的loader。我们先用npm安装style-loader和css-loader。

1	npm install --save-dev style-loader css-loader

安装好后，在webpack.config.js里配置CSS的loader。代码如下：

webpack.config.js

1 2 3 4

{     test:/\.css$/,     loader:['style-loader','css-loader'] }

配置好后，需要重新启动一下服务器，才可以正确解析。这时候我们就可以在NavLink上加 className指定CSS类了。

1	<NavLink exact to='/' className="blue">Jscomponent</NavLink> |&nbsp;

现在可以打开浏览器看一下我们配置的结果了。

直接在NavLink上写样式

除了这种用CSS文件的方式写样式，还可以更直接和玻璃，这节在NavLink上写样式，看下面的代码。

1	<NavLink exact to='/' style={{color:'red',fontSize:'50px'}}>Jscomponent</NavLink>

这种方法虽然直观好用，但是不建议在实际开发中使用，这增加了代码的耦合度，不是一种好的编程方式。

activeClassName

作为一个链接是用激活状态的，激活状态就是当我们处在这个链接时。activeClassName就是设置激活状态的样式，它接受一个类名，我们现在nav.css顶一个active的类，把字体设置为红色。

nav.css

1 2 3 4 5 6

.blue{     color:blue; } .active{     color:red; }

然后改写NavLink标签。

nav.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

import React from 'React'; import {NavLink} from 'react-router-dom'; import './nav.css';   const NavBar = () =>( <div>     <div>         <NavLink exact to='/' className="blue">Jscomponent</NavLink> |&nbsp;         <NavLink to='/Jscomponentb' activeClassName='active'>Jscomponentb</NavLink> |&nbsp;         <NavLink to='/Jscomponentc' activeClassName='active'>Jscomponentc</NavLink>     </div> </div> )    export default NavBar;

总结：内容虽然简单，但是都是实际工作中经常用到的小技巧，例如activeClassName的使用和我们的className,还有我们的webpack配置也必须掌握。