第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配置也必须掌握。