加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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>

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读