测开技能--Web开发 React 学习（十六）

接上篇这个时候我们访问都带着404，那么我们怎么解决呢，用Switch。

代码语言：javascript复制

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

代码语言：javascript复制

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 增加一个样式即可。

增加一个样式文件，如下。

代码语言：javascript复制

.active{
    color: forestgreen;
}

我们导入下，然后保存，系统加载后

对应的颜色就发生了改变，这样，我们就知道了当前选中的页面了。我们就可以更快速的去知道当前选中的页面了。是不是感觉很简单，就是一个样式问题，而且呢，还给了很好的解决方案。

当然了，我们还可以在navlink 中直接去写，如下

代码语言：javascript复制

 <li>
        <NavLink to="/project" activeStyle={{color:"green"}}>project</NavLink></li>

不用多写了选中的文件了， 当然，我们还可以更改对应classname。

本次就分享到这里，后续继续分享，路由跳转传递参数。

class

0 人点赞