React-router 点击nav-link当前页面重新渲染

#1

在App中点击后当前页面还会重新渲染,如何才能使当前页面对应的Link点击后页面不用重新渲染

// routes.js
const routes = [
  {
    path: '/discover',
    component: Discover,
    exact: true
  },
  {
    path: '/image',
    component: Image,
    exact: true
  },
  {
    path: '/me',
    component: Me,
    exact: true
  },
  {
    path: '*',
    component: NotFound
  }
]
// App.js
class App extends Component {
  render () {
    return (
      <BrowserRouter>
        <Route render={({match, location}) => (
          <div className="app">
            <NavBar/>
            <Switch key={location.key} location={location}>
              <Redirect exact from="/" to="/discover"/>
              {routes.map(route => <Route key={route.path} {...route}/>)}
            </Switch>
            <Toast/>
            <Loading/>
          </div>
        )}/>
      </BrowserRouter>
    )
  }
}
// Nav.js
class Nav extends Component {
  render () {
    return (
      <div className="nav-bar vux-1px-t">
        <NavLink className="nav-bar-item" to="/discover">
          <Icon type="icon-discover"/>
          <p className="nav-bar-label">发现</p>
        </NavLink>
        <NavLink className="nav-bar-item" to="/image">
          <Icon type="icon-image"/>
          <p className="nav-bar-label">形象</p>
        </NavLink>
        <NavLink className="nav-bar-item" to="/me">
          <Icon type="icon-me"/>
          <p className="nav-bar-label">我的</p>
        </NavLink>
      </div>
    )
  }
}
#2

已解决
由于Switch使用的key是location.keylocation.key返回的是随机字符串,每次切换路由都不一样,导致多次渲染。
使用 location.pathname 即可,我觉得还ok