# 路由导航定位 路由导航定位的其实就是页面发生跳转，那么页面中对定的导航链接需要被确定。也就是平常我们所说的给它添加颜色即可。那这个如何做到呢？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`来实现的