测开技能--Web开发 React 学习（十六）
接上篇这个时候我们访问都带着404，那么我们怎么解决呢，用Switch。
import React from "react"
import {
HashRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import Project from "../../pages/project"
import Inteface from '../../pages/interface'
import Nound from '../../pages/notfound'
export default class Nav extends React.Component{
render(){
return(
<div className="app"> <Router>
<ul>
<li>
<Link to="/project">project</Link></li>
<li> <Link to="/interface">interface</Link></li>
</ul> <Switch>
<Route exact path="/project" component={Project}></Route>
<Route strict exact path="/interface" component={Inteface}></Route>
<Route exact path="/interface/name" component={Inteface}></Route>
<Route component={Nound}></Route>
</Switch></Router>
</div>
)
}
}这样就可以解决。
当访问不存在的页面才会返回404的
对于我们要选中的高亮，我们采用的是NavLink，怎么处理的呢 ，我们将原来的Link 改为 NavLink
export default class Nav extends React.Component{
render(){
return(
<div className="app"> <Router>
<ul>
<li>
<NavLink to="/project">project</NavLink></li>
<li> <NavLink to="/interface">interface</NavLink></li>
</ul> <Switch>
<Route exact path="/project" component={Project}></Route>
<Route strict exact path="/interface" component={Inteface}></Route>
<Route exact path="/interface/name" component={Inteface}></Route>
<Route component={Nound}></Route>
</Switch></Router>
</div>
)
}
}我们可以看下，当我们选中后
他会变成active，那么 我们就个class 为active 增加一个样式即可。
增加一个样式文件，如下。
.active{
color: forestgreen;
}我们导入下，然后保存，系统加载后
对应的颜色就发生了改变，这样，我们就知道了当前选中的页面了。我们就可以更快速的去知道当前选中的页面了。是不是感觉很简单，就是一个样式问题，而且呢，还给了很好的解决方案。
当然了，我们还可以在navlink 中直接去写，如下
<li>
<NavLink to="/project" activeStyle={{color:"green"}}>project</NavLink></li>不用多写了选中的文件了， 当然，我们还可以更改对应classname。
本次就分享到这里，后续继续分享，路由跳转传递参数。
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2020-08-01，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
