在菜单bootstrap中获取路由反应突出显示

时间:2016-07-30 10:41:31

标签: reactjs react-router react-bootstrap

使用react-routes在react-bootstrap中为NavItem提供活动类的内容。

index.js

<Router history={browserHistory}>
    <Route path="/" component={Menu}>
        <Route path="explore" component={Explore}/>
        <Route path="whatever" component={App} />
        <Route path="*" component={App}/>
    </Route>
  </Router>

menu.js

`<div>
<Nav bsStyle="tabs">
      <NavItem  href="/explore">Explore</NavItem>
      <NavItem  href="/whatever" active>TEST</NavItem>
      <NavItem >TEST </NavItem>
</Nav>
{this.props.children}
</div>`

1 个答案:

答案 0 :(得分:0)

您可以像下面的代码一样添加链接,
如果你想为它添加任何样式,只需将className放入每个链接

import { Link } from 'react-router'   
<Nav bsStyle="tabs">
      <Link To="/explore">Explore</Link>
      <Link To="/whatever" active>TEST</Link>
      <Link >TEST </Link>
</Nav>