# 路由導航定位 路由導航定位的其實就是頁面發生跳轉，那么頁面中對定的導航鏈接需要被確定。也就是平常我們所說的給它添加顏色即可。那這個如何做到呢？Link組件是達不到這個效果的。我們要通過二級路由或者NavLink來實現。 \*\* 最終效果\*\*  \*\* 目前效果\*\*  ## 二級路由(推薦) ### 為什么要用二級路由？ 思考： > 在一開始我們會想到只要它的路由規則`{this.props.location.pathname}`與我們當前路由一致不就可以了么？ > 思考的假想，這個只是為了在這里讓大家便于參考后面我們實現。 ``` <Link to={"/home"} className={this.props.location.pathname == '/home' ? 'active' : ''}>首頁</Link> ``` ### 我們去打印一下this是誰？ ```jsx ReactDom.render( // 開啟路由世界的大門 路由的根地址，只能擁有一次 <HashRouter> {console.log(this)} {/*導航 Link Vue的用法很相似 注意這里是大寫*/} <Link to={"/home"}>首頁</Link> <Link to={"/about"}>關于</Link> <Link to={"/news"}>新聞中心</Link> <Link to={"/news/1"}>新聞1</Link> <hr/> {/*路由指向哪個頁面 （組件）有兩個意義 定義路由指向 在哪個位置顯示頁面*/} <Route path={'/home'} component={Home}/> <Route path={'/about'} component={About}/> <Route path={'/news'} component={NewsCenter} exact/> <Route path={'/news/:id'} component={News} exact/> </HashRouter> , document.getElementById('root')) ```  打印結果為undefined;也就是this根本沒有任何的作用。其實我們在上面的路由匹配時候應該可以發現都是從`/home`來進行匹配的，其實我們忽略了一點`home`前面的`/`也是一個路由規則。 ## 進行修改 將上面的路由封裝成一個新的組件`App.js`表示是二級路由組件。 ### App.js ```jsx import React, {Component, Fragment} from 'react' import {Link, Route} from "react-router-dom"; import Home from "./pages/Home"; import NewsCenter from "./pages/NewsCenter"; import News from "./pages/News"; import About from "./pages/About"; export default class App extends Component { constructor(props) { super(props) this.state = {} console.log(this); } render() { let {pathname} = this.props.location return ( <Fragment> {/*導航 Link vue的用法很相似*/} <Link to={"/home"} className={pathname == '/home' ? 'active' : ''}>首頁</Link> <Link to={"/news/1"} className={pathname == '/news/1' ? 'active' : ''}>新聞</Link> <Link to={"/news"} className={pathname == '/news' ? 'active' : ''}>新聞中心</Link> <Link to={"/about"} className={pathname == '/about' ? 'active' : ''}>關于</Link> {/*路由指向到哪個頁面 指的是組件*/} <Route path={'/home'} component={Home}/> <Route path={'/news'} component={NewsCenter} exact/> <Route path={'/news/:id'} component={News} exact/> <Route path={'/about'} component={About}/> </Fragment> ) } } ``` ### 效果  ## 添加樣式 app.css ``` .active{ background: pink; } ``` App.js ``` import React, {Component, Fragment} from 'react' import {Link, Route} from "react-router-dom"; import Home from "./pages/Home"; import NewsCenter from "./pages/NewsCenter"; import News from "./pages/News"; import About from "./pages/About"; import style from './app.css' export default class App extends Component { constructor(props) { super(props) this.state = {} console.log(this); } render() { let {pathname} = this.props.location return ( <Fragment> {/*導航 Link vue的用法很相似*/} <Link to={"/home"} className={pathname == '/home' ? style.active: ''}>首頁</Link> <Link to={"/news/1"} className={pathname == '/news/1' ? style.active : ''}>新聞</Link> <Link to={"/news"} className={pathname == '/news' ? style.active : ''}>新聞中心</Link> <Link to={"/about"} className={pathname == '/about' ? style.active : ''}>關于</Link> {/*路由指向到哪個頁面 指的是組件*/} <Route path={'/home'} component={Home}/> <Route path={'/news'} component={NewsCenter} exact/> <Route path={'/news/:id'} component={News} exact/> <Route path={'/about'} component={About}/> </Fragment> ) } } ``` ## 使用NavLink組件（了解） ``` <NavLink activeClassName={style.active} exact to={"/home"}>首頁</NavLink> <NavLink activeClassName={style.active} exact to={"/news/1"} >新聞</NavLink> <NavLink activeClassName={style.active} exact to={"/news"}>新聞中心</NavLink> <NavLink activeClassName={style.active} exact to={"/about"}>關于</NavLink> ```  發現上面的效果**新聞中心**和**新聞1**都被選中。同樣的你也應該知道需要給它添加**exact**屬性 # 總結 對于導航定位來說工作中經常使用二級路由，而NavLink 一般很少使用。原因是因為第三方UI框架實現時都是通過二級導航配合`this.props.location.pathname`來實現的