react-router-dom Route\Switch\exact

reactrouter.com/web/api/Nav…

官方释义：值为true时，只有在路由完全匹配的组件才会被应用。

• 情况一：Route被Switch包裹

   <Switch>
  
   <Route path='/login' component={Login} exact/>  
  
   <Route path='/main' component={Main} />
  
  </Switch>
  复制代码

  Main组件下面如果有子组件的切换，比如菜单栏的切换，则不能加exact, 必须在子路由上去加exact，

  否则无法匹配 到子路由；例如：

  子路由 /main/option1 就匹配不到

  只能是在 上加exact

• 情况二：Route不被Switch包裹的情况

  <HashRouter>  
  
   <Route path='/login' component={Login} />  
  
   <Route path='/' component={Main} />
  
  </HashRouter>
  复制代码

  此时会匹配所有带'/' 的组件，也就是Login和Main 都会被渲染，如下图所示：

  解决这个问题有3个方法：

  （1）像情况一种，不单独使用'/'作为路由，比如'/main'

  （2）为path='/'的Route组件 添加exact属性；

  （3）将所有的Route组件用Switch组件包裹（情况一的写法）

  方法（2）的弊端，如果path='/' 的路由组件下还有子组件，比如菜单切换，那么可能就匹配不到；

  例如/main/option,就访问不到，情况一有提到，在父路由上添加exact，会匹配不到子路由；

  方法（2）是不适用的。

  Notes: Switch 是匹配第一个子级或，下面有官网释义截图

以上是我个人在开发过程中所遇到问题的记录，写的有问题的欢迎大家纠正