react-router实现tab页面切换,并解决选中样式首页始终选中问题

import React, {Component} from 'react';
import { BrowserRouter as Router, Route, NavLink } from "react-router-dom";
import './index.less';

import Index from '../../pages/Index';
import About from '../../pages/About';
import ProfessorList from '../../pages/ProfessorList';
// import logo from './logo.svg';

class TopBar extends Component {
    render() {
        return (
            <Router>
                <div className="container">
                    <div className="nav-bar">
                        <div className="logo">
                            {/*<img src={logo} className="App-logo" alt="logo" />*/}
                            华语智库
                        </div>
                        <ul>
                            <li>
                                <NavLink to="/" activeClassName="nav-active">首页</NavLink>
                            </li>
                            <li>
                                <NavLink to="/about" activeClassName="nav-active">关于我们</NavLink>
                            </li>
                            <li>
                                <NavLink to="/professor" activeClassName="nav-active">专家团队</NavLink>
                            </li>
                        </ul>
                    </div>
                    <div className="content">
                        <Route exact path="/" component={Index}/>
                        <Route path="/about" component={About}/>
                        <Route path="/professor" component={ProfessorList}/>
                    </div>
                </div>
            </Router>
        );
    }
}

export default TopBar;

如上,tab标签选中加了默认样式,但是其他无论怎么换,首页都是默认选中的样式

这里给index的路由加一个exact就可以了。

<NavLink to="/" exact activeClassName="nav-active">首页</NavLink>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏移动开发

android界面背景键盘弹起被压缩

键盘弹起时,若界面设置了背景图有被压缩的情况.如果界面的布局采用了ScrollView可以设置属性android:scrollbars=”horizontal”...

16430
来自专栏IMWeb前端团队

浅尝iconfont

1. iconfont简介 什么是iconfont?正如字面意思,就是图标字体,下面我给大家慢慢道来 web页面包含什么元素? 文字 链接 流媒体 视频 音频 ...

37970
来自专栏james大数据架构

jquery.mobile手机网页简要

先上最终效果: ? ? ? ? ? 最近做了一个用手机浏览器访问的web应用,采用较流行的HTML5,为了提高开发效率节省时间决定采用现有开源框架,免去了自己做...

26370
来自专栏每日一篇技术文章

VR+全景播放器+头控讲解-05

14810
来自专栏前端新视界

React 系列教程 1:实现 Animate.css 官网效果

41620
来自专栏前端笔记

【HTML5 理论知识】就H5调试技巧,浅谈:iPhone X 适配方案!

image.png 2017年9月苹果发布了iPhone X机型,对于它的“刘海儿”和底部Home Indicator。我们可以通过以下三种方案进行适配~下...

71580
来自专栏葡萄城控件技术团队

HTML5 & CSS3初学者指南(1) – 编写第一行代码

介绍 网络时代已经到来。现在对人们来说,每天上网冲浪已经成为一种最为常见的行为。 在网页浏览器中输入一段文本地址,就像http://www.codeprojec...

28160
来自专栏人云亦云

网页中内嵌字体

46260
来自专栏Thinks

10步大幅提升网站可访问性

10步大幅提升网站可访问性。每一步都可以在20分钟内完成。这篇文章也可以在20分钟内看完。 第一步,检查<title></title>,不允许空,不允许过长,简...

8410
来自专栏向治洪

ConstraintLayout约束控件详解

简介 在Google IO大会中不仅仅带来了Android Studio 2.2预览版,同时带给我们一个依赖约束控件–ConstraintLayout。一种构建...

33150

扫码关注云+社区

领取腾讯云代金券