如何使用React Router更改子组件的状态？

Question

我正在使用React测试路由...

如果我点击列表，我希望列表颜色变为橙色。

帮帮我PLZ ..

App.js

class App extends Component {

    render() {
        return(
            <Router>
                <div>
                    <Nav />
                    <Route path="/counter" component={Counter}/>
                    <Route path="/qna" component={Qna}/>
                </div>  
            </Router>
        );
    }
}

Nav.js

class Nav extends Component {
    render() {
        return (
            <div className='nav'>
                <span className='brand'>brand</span>
                <ul>
                    <li><Link to='/'>Home</Link></li>
                    <li><Link to='/counter'>Counter</Link></li>
                    <li className='active'><Link to='/qna'>Qna</Link></li>
                </ul>
            </div>
        );
    }
}

Nav.css

.nav li.active a{
    color: orangered !important;
} 

点击Qna

时我想要的是什么

Answer 1

您可以使用React Router的activeClassName道具。

<li><Link to="/qna" activeClassName="active">Qna</Link></li>

请查看the documentation。

Answer 2

使用NavLink组件，如果URL匹配，它可以自动为链接添加活动的类名。 Doc here

<强> Nav.js

class Nav extends Component {
    render() {
        return (
            <div className='nav'>
                <span className='brand'>brand</span>
                <ul>
                    <li><NavLink to='/' activeClassName='active'>Home</NavLink></li>
                    <li><NavLink to='/counter' activeClassName='active'>Counter</NavLink></li>
                    <li><NavLink to='/qna' activeClassName='active'>Qna</NavLink></li>
                </ul>
            </div>
        );
    }
}

<强> Nav.css

.nav li a.active {
    color: orangered !important;
}