在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>
)
}
}