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

• Z时代
• 2024-01-10
• 分类：综合

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>

以上是 react-router实现tab页面切换，并解决选中样式首页始终选中问题 的全部内容， 来源链接： utcz.com/z/381859.html