当前位置： 移动技术网 > IT编程>开发语言>JavaScript > react-router实现tab页面切换，并解决选中样式首页始终选中问题

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

2018年07月27日  | 移动技术网IT编程  | 我要评论

内燃机效率,十年 电影下载,七龙珠4部全集

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>

 

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网