现在我们来搞一搞React中的路由吧，别问我为什么这木喜欢用搞这个字，因为它比较深奥。

注意下面我们使用的是React-Router-DOM

React中的路由基本使用还是满简单的，零碎的小东西有点多，所以我直接把他们揉到一起做了一个小例子，代码我都写上注释了，应该挺简单易懂的

注意：以下所有操作均运行在搭好的React环境中

这个小例子里主要有：路由的使用，精准匹配，路由的高亮，子路由，包容性路由变为排他性路由，动态路由，路由转化

 

1.安装react-router-dom

　　yarn add  react-router-dom

 

2.然后我们直接上代码，照着代码操作就可以了

import React, { Component } from 'react'import './index.css'import {    Route,    Switch,    Link,    Redirect,    NavLink,    BrowserRouter as Router} from 'react-router-dom'class Home extends Component{    render(){       return (        
                
      
               
       
                   
        
         food
        
        
                   
        
         wiki
        
        
                   
        
         profile
        
        
               
       
               {
    /* 使用Switch是为了将React默认的包容性路由变为排他性路由 */}               {
    /* 包容性路由：/food 既能匹配到/ 又能匹配到/food                      排他性路由：只能匹配一个 /food就只能匹配到/food */}                   
       
                              {
    /*Redirect 是路由转化  即匹配到某一个路由转化到另一个路由  */}                       
                               
        
                                  {
   /* 除了用Switch外也可以用exact来避免一个路由匹配多个，exact是精准匹配                            但是使用exact时需要每个路由上都加上exact才能达到和Switch一样的效果 */}                        {
    /* 
         
           */}                       
           
            
             
            
           
          
         
        
                  
      
        
            )    }}//定义路由使用的组件    //在Food中定义子路由const Food = () => (    
     
        
      foodlist
      
        
      foodmenu        
              
          
     
  ) const Wiki = () => (    
     
      Wiki
     
  ) const Profile = () => (    
     
      profile
     
  )  const Page404 = () => (    
     
      page not found.
     
  )  //定义路由使用的组件结束    //子路由调用的组件  const Foodlist = () => (    
     
      子路由的Foodlist
     
  )  const Foodmenu = () => (    
     
      子路由的Foodmenu
     
  )export default Home

 

 

特别注意：/index.css是我引入的一个高亮的样式

　　

index.css里面的代码

.active {
       font-size: 50px;  }

 

运行结果：

 

这个运行结果丑是丑了点，但是功能没瑕疵，和我一样，不靠颜值吃饭