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

我正在用React测试路由

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

请帮帮我

App.js

class App extends Component {

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

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 li.active a{
    color: orangered !important;
} 

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 li a.active {
    color: orangered !important;
} 

单击Qna时我想要什么

---

您可以使用React Router的

activeClassName

道具

Qna

---

查看此链接。

使用NavLink组件，如果URL与之匹配，它可以自动向链接添加活动类名

Nav.js

class App extends Component {

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

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 li.active a{
    color: orangered !important;
} 

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 li a.active {
    color: orangered !important;
}