React中路由的基本使用
阿新 • • 發佈:2018-11-19
現在我們來搞一搞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; }
執行結果:
這個執行結果醜是醜了點,但是功能沒瑕疵,和我一樣,不靠顏值吃飯