React Router 4路由渲染异常：访问/login路由时初始路由组件重复渲染

哈哈，这个坑我之前也踩过！问题出在你的根路由path="/"没有添加exact属性——React Router默认是前缀匹配规则，当你访问/login时，/会被当作/login的前缀匹配到，导致Switch优先渲染根路由对应的组件，所以才会出现路径变了但根组件还重新渲染的情况。

给你个简单直接的解决方案：给根路由加上exact属性，让它只有在路径完全等于/的时候才触发渲染：

// 你的Root组件中的Switch代码调整后
<Switch>
  {/* 加上exact实现严格匹配 */}
  <Route exact path="/" component={你的根路由组件} />
  <Route path="/login" component={Login组件} />
</Switch>

这样调整后：

• 访问/时，正常渲染根组件，里面的gallery嵌套路由也能正常工作（嵌套路由的匹配不受父组件exact的影响，因为它们是在子组件内部处理的）
• 切换到/login时，根路由因为exact的限制不会被匹配到，只会渲染Login组件，根组件会被自动卸载，自然就不会再重新渲染了

如果你的根组件里还有/gallery/:id这类嵌套路由，完全不用担心里外冲突——只要嵌套路由是写在根组件内部的，只有当根组件被渲染（也就是路径严格为/时）才会生效，完全不影响其他路由的正常跳转。

内容的提问来源于stack exchange，提问作者parohy