React-router v4手记

1. 情况：用Link标签完成导航功能，要求被选者发生样式变化，此时推荐更换成NavLink标签，NavLink标签和Link标签最主要的区别在于NavLink标签有activeStyle和activeClassName，用于更改被选中元素的样式，而不需要我们引入 state状态。
   参考代码如下：

// 高亮的样式，表示我们在哪个导航下
const selectedStyle = {
  backgroundColor: 'white',
  color: 'slategray'
}

// navLink， activeStyle 点击高亮显示当前标签。
export const MainMenu = () => (
  <nav className='main-menu'>
    <NavLink replace to='/'>首页</NavLink>
    <NavLink replace to='/about' activeStyle = {selectedStyle}>关于我们</NavLink>
    <NavLink replace to='/events' activeStyle = {selectedStyle}>企业事件</NavLink>
    <NavLink replace to='/products' activeStyle = {selectedStyle}>公司产品</NavLink>
    <NavLink replace to='/contact' activeStyle = {selectedStyle}>联系我们</NavLink>
    <NavLink replace to='/log' activeStyle = {selectedStyle}>登录</NavLink>
  </nav>
)

2. 情况：报错Hash history cannot PUSH the same path; a new entry will not be added to the history stack，此时原因是浏览器会将同样的路径push到stack里，导致报错。参考链接。
   此时可以使用replace来解决。

<NavLink replace to='/log' activeStyle = {selectedStyle}>登录</NavLink>

3. 情况：NavLink标签的to属性既可以为string，又可以为object，当其为object时，参数展示如下：

• pathname，跳转到的URL。
• search，跳转后的url参数。此例中，跳转后的url是http://127.0.0.1:9090/p2?p1=1&p2=2
• state，会保存在this.history.location.state中，可以借此保存数据