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

【问题标题】：How can I change the state of subcomponents with React Router?如何使用 React Router 更改子组件的状态？
【发布时间】：2017-09-19 14:13:05
【问题描述】：

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

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

请帮帮我..

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 时我想要什么

【问题讨论】：

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

你可以使用 React Router 的 activeClassName 属性。

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

请查看the documentation 了解此内容。

【讨论】：

【解决方案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;
}

【讨论】：