react动态改变选中不选中_测开技能Web开发 React 学习（十六）

系列文章

         测开技能--Web开发 React 学习(一)

         测开技能--Web开发 React 学习(二)环境搭建

         测开技能--Web开发 React 学习(三)元素的渲染

         测开技能--Web开发 React 学习(四)元素的动态渲染

         测开技能--Web开发 React 学习(五)JSX

         测开技能--Web开发 React 学习(六)组件

         测开技能--Web开发 React 学习(七)提取组件

         测开技能--Web开发 React 学习(八)Props 的只读性

         测开技能--Web开发 React 学习(九)条件渲染

         测开技能--Web开发 React 学习(十)表单

         测开技能--Web开发 React 学习(十一)

         测开技能--Web开发 React 学习(十二)网络请求 

         测开技能--Web开发 React 学习(十三)网络请求封装

         测开技能--Web开发 React 学习(十四)

         测开技能--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">projectLink>li>    <li> <Link to="/interface">interfaceLink>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">projectNavLink>li>    <li> <NavLink to="/interface">interfaceNavLink>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"}}>projectNavLink>li>

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

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