React中路由的基本使用

現在我們來搞一搞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 (
        <Router>
           <div>
               <ul>

                   <NavLink to="/food" activeClassName="active">food</NavLink><hr/>
                   <NavLink to="/wiki" activeClassName="active">wiki</NavLink><hr/>
                   <NavLink to="/profile" activeClassName="active">profile</NavLink><hr/>
               </ul>


               {/* 使用Switch是為了將React默認的包容性路由變為排他性路由 */}
               {/* 包容性路由：/food 既能匹配到/ 又能匹配到/food   
                   排他性路由：只能匹配一個 /food就只能匹配到/food */}

                   <Switch>
                      {/*Redirect 是路由轉化  即匹配到某一個路由轉化到另一個路由  */}
                       <Redirect from="/" exact to="/food"/>
                       <Route path="/food" component={Food}/>
                         {/* 除了用Switch外也可以用exact來避免一個路由匹配多個，exact是精准匹配
                            但是使用exact時需要每個路由上都加上exact才能達到和Switch一樣的效果 */}
                        {/* <Route path="/wiki" exact component={Wiki}/> */}
                       <Route path="/wiki" component={Wiki}/>
                       <Route path="/profile" component={Profile}/>
                       <Route component={Page404}/>
                   </Switch>
           </div>
        </Router>
       )
    }
}


//定義路由使用的組件

    //在Food中定義子路由
const Food = () => (
    <div>
        <Link to="/food/foodlist/3">foodlist</Link><br/>
        <Link to="/food/foodmenu">foodmenu</Link>
        <Route path="/food/foodlist/:id" component = {Foodlist}></Route>
        <Route path="/food/foodmenu" component = {Foodmenu}></Route>
    </div>
  )


 const Wiki = () => (
    <div>Wiki</div>
  )

 const Profile = () => (
    <div>profile</div>
  )

  const Page404 = () => (
    <div>page not found.</div>
  )

  //定義路由使用的組件結束

  

  //子路由調用的組件
  const Foodlist = () => (
    <div>子路由的Foodlist</div>
  )
  const Foodmenu = () => (
    <div>子路由的Foodmenu</div>
  )





export default Home 

 

 

特別注意：/index.css是我引入的一個高亮的樣式

　　

index.css里面的代碼

.active {
    font-size: 50px;
  }

 

運行結果：

 

這個運行結果丑是丑了點，但是功能沒瑕疵，和我一樣，不靠顏值吃飯