react router activeclassName 没有显示
发布时间:2020-12-15 20:40:21 所属栏目:百科 来源:网络整理
导读:import React,{Component} from ‘react‘import {NavLink,Switch,Route,Redirect} from ‘react-router-dom‘import About from ‘../views/about‘import Home from ‘../views/home‘export default class App extends Component { render () { return (
import React,{Component} from ‘react‘ import {NavLink,Switch,Route,Redirect} from ‘react-router-dom‘ import About from ‘../views/about‘ import Home from ‘../views/home‘ export default class App extends Component { render () { return ( <div> <div className="row"> <div className="col-xs-offset-2 col-xs-8"> <div className="page-header"> <h2>React Router Demo</h2> </div> </div> </div> <div className="row"> <div className="col-xs-2 col-xs-offset-2"> <div className="list-group"> <NavLink className="list-group-item" to=‘./about‘ activeClassName=‘activeClass‘>About</NavLink> <NavLink className="list-group-item" to=‘./home‘ activeClassName=‘activeClass‘>Home</NavLink> </div> </div> <div className="col-xs-6"> <div className="panel"> <div className="panel-body"> <Switch> <Route path=‘/about‘ component={About} /> <Route path=‘/home‘ component={Home}/> <Redirect to=‘/about‘/> </Switch> </div> </div> </div> </div> </div> ) } } 标红色的部分是路由路径错误,把点去掉就可以了,如下所示 <NavLink className="list-group-item" to=‘/about‘ activeClassName=‘activeClass‘>About</NavLink> <NavLink className="list-group-item" to=‘/home‘ activeClassName=‘activeClass‘>Home</NavLink> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |