react-router实战之Switch

1.简介

Switch与各种语言中的Switch关键字含义类似，代表只执行第一个匹配的含义。

渲染第一个与位置匹配的<Route>或<Redirect>元素

<Switch>独特之处在于它只绘制子元素中第一个匹配的路由元素。

如果没有<Switch>，直接使用一堆<Route>，则每个与当前路径匹配的<Route>都会被绘制

2.实例

使用<Switch>时

  

   

    

     

    
    

     

              <Switch>
     
    
   

    

     

    
    

     
            
      <Route path="/about">
     
    
   

    

     

    
    

     
                
      <About />
     
    
   

    

     

    
    

     
            
      </Route>
     
    
   

    

     

    
    

     
            
      <Route path="/users">
     
    
   

    

     

    
    

     
                
      <Users />
     
    
   

    

     

    
    

     
            
      </Route>
     
    
   

    

     

    
    

     
            
      <Route path="/">
     
    
   

    

     

    
    

     
                
      <Home />
     
    
   

    

     

    
    

     
            
      </Route>
     
    
   

    

     

    
    

     

              </Switch>