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;
  }

 

運行結果：

 

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