react router activeclassName 没有显示

最新推荐文章于 2024-05-06 16:25:21 发布

a50270

最新推荐文章于 2024-05-06 16:25:21 发布

阅读量394

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xinzaimengzai/p/9951232.html

版权

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>

转载于:https://www.cnblogs.com/xinzaimengzai/p/9951232.html