0

要解决的问题:

clipboard.png
当URL为非首页时(path='/category'),首页('path='/'')错误的添加了activeClassName

首先路由模式是BrowserRouter

import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
// ...
class RouteMap extends Component {
  render () {
    return (
      <Router>
        <Switch>
          <Route exact path='/' component={Home} />
          <Route path="/category" component={props => requireAuth(Category, props)} />
          <Route path="/about" component={About} />
          <Route path="/help" component={Help} />
          <Route path="/login" component={Login} />
          <Route component={NotFound} />
          <Redirect to="/" />
        </Switch>
      </Router>
    )
  }
}

export default RouteMap;

然后导航代码如下:

import { withRouter, NavLink as Link } from 'react-router-dom';
// ...
<li><Link to="/" activeClassName="activeRoute">Home</Link></li>
<li><Link to="/category" activeClassName="activeRoute">category</Link></li>
<li><Link to="/about" activeClassName="activeRoute">about</Link></li>
<li><Link to="/help" activeClassName="activeRoute">Help</Link></li>
cheris 91
2018-05-08 提问
1 个回答
0

已采纳

已解决:

import { withRouter, NavLink as Link } from 'react-router-dom';
// ...
<li><Link to="/" exact activeClassName="activeRoute">Home</Link></li>

<NavLink>
exact: bool
若为 true,只有当访问地址严格匹配时激活样式才会应用

strict: bool
若为 true,只有当访问地址后缀斜杠严格匹配(有或无)时激活样式才会应用

isActive: func
决定导航是否激活,或者在导航激活时候做点别的事情。不管怎样,它不能决定对应页面是否可以渲染。

撰写答案

推广链接