NavLink 使用方法见 https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/NavLink.md
NavLink 和 PureComponent 一起使用的时候，会出现 激活链接样式（当前页面对应链接样式，通过 activeClassName、activeStyle 设置） 不生效的情况。效果如下：
刷新页面后导航激活样式生效，点击导航链接的时候 url 跳转，但是导航激活样式不生效。
上图效果对应代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>NavLink And PureComponent</title> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> <script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script> <style> .menu-link { display: inline-block; width: 100px; text-decoration: none; text-align: center; background: #dedede; } .menu-link.active { background: tomato; } </style> </head> <body> <div id="app"></div> <script type="text/babel"> // import ReactRouterDOM, { HashRouter, Route } from 'react-router-dom'; // import React, { Component, PureComponent } from 'react'; const { HashRouter, Route, NavLink } = ReactRouterDOM; const { Component, PureComponent } = React; class Menu extends PureComponent { render() { return ( <div> <NavLink className="menu-link" activeClassName="active" activeStyle={{color: '#fff'}} to='/home'>首页</NavLink> <NavLink className="menu-link" activeClassName="active" activeStyle={{color: '#fff'}} to='/help'>帮助页</NavLink> </div> ); } } class App extends PureComponent { render() { return ( <HashRouter> <div> <Menu /> <Route path='/home' component={ () => <div>首页内容</div> } /> <Route path='/help' component={ () => <div>帮助页内容</div> } /> </div> </HashRouter> ); } } ReactDOM.render( <App />, document.getElementById('app') ); </script> </body> </html>