相关疑难解决方法(0)

我使用创建一个bootstrap风格的侧边栏Link.这是我的代码片段:

<ul className="sidebar-menu">
  <li className="header">MAIN NAVIGATION</li>
  <li><Link to="dashboard"><i className="fa fa-dashboard"></i> <span>Dashboard</span></Link></li>
  <li><Link to="email_lists"><i className="fa fa-envelope-o"></i> <span>Email Lists</span></Link></li>
  <li><Link to="billing"><i className="fa fa-credit-card"></i> <span>Buy Verifications</span></Link></li>
</ul>

```

我想active在包装元素上设置活动路径的类<li>.我看到有其他的解决方案,在那里,展示了如何做到这一点kindof(使用反应路由器当前的路线有条件地设置活动类菜单上),但我不认为这是设置在一个包装的主动类的最佳方式Link.

我还发现了https://github.com/insin/react-router-active-component,但感觉它应该是不必要的.

在React Router中,这是可能的,还是需要使用外部解决方案？

我正在使用react 15.4.2和react-router4.0.0,这个项目是用Create React App引导的.

这是我的代码.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom'


 const AboutPage = () => {
 return(
    <section>
        <h2>This is About page</h2>
        <Link activeClassName="active" to="/about/nestedone">Nestedone</Link>
        {' '}
        <Link activeClassName="active" to="/about/nestedtwo">Nested two</Link>
    </section>
)
}

const HomePage = () => {
return(
    <section>
        <h2>This is Home page</h2>
        <Link to="/about">About</Link>
    </section>
)
}

const NestedOne = () => {
return (
    <section>
        <h2>Nested page 1</h2>
    </section>
)
}


const …

我在 react 上使用 gatsby 并有一个带链接的导航菜单，希望在单击链接时在当前页面中显示边框底部，此时边框仅在悬停时出现。

       <ul className="men" id="menu">
            <li className="menuSob">
              <Link className="menuItem" to="/about/">
                sobre a magnet
              </Link>
             </li>
             <li className="menuRep">
              <Link className="menuItem" to="/representacoes/">
                representacoes
              </Link>
             </li>
             <li className="menuServ">
              <Link className="menuItem" to="/servicos/">
               servicos
              </Link>
             </li>
             <li className="menuContent">
              <Link className="menuItem" to="/conteudo/">
                conteudo
              </Link>
             </li>
             <li className="menuCont">
              <Link className="menuItem" to="/contato/">
                contato
              </Link>
             </li>
       </ul>