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>