无法在React NavLink中删除活动类

时间:2019-05-27 15:01:19

标签: reactjs

我已经利用NavLink样式将活动类添加到当前页面菜单项链接中。我也在Navs中使用“精确”。但是,我无法从主页上删除活动的类。任何人都可以看看我的代码,看看我是否缺少什么吗?谢谢。代码如下。 :

app.js-

import React, { Component } from 'react';
import './App.css';
import { HashRouter as Router, Route } from 'react-router-dom';


import Inicio from './pages/Inicio';
import Gamification from './pages/Gamification';
import TotalMultimedia from './pages/TotalMultimedia';
import ELearning from './pages/ELearning';
import AbsoluteEngagement from './pages/AbsoluteEngagement';
import Nosotros from './pages/Nosotros';
import Contacto from './pages/Contacto';

class App extends Component {
  render() {
    return (
      <Router basename="/"> 
        <div>
        <Route exact path='/' component={Inicio} />
        <Route exact path='/Gamification' component={Gamification} />
        <Route exact path='/TotalMultimedia' component={TotalMultimedia} />
        <Route exact path='/ELearning' component={ELearning} />
        <Route exact path='/AbsoluteEngagement' component=     
{AbsoluteEngagement} />
        <Route exact path='/Nosotros' component={Nosotros} />
        <Route exact path='/Contacto' component={Contacto} />
        </div>
      </Router>
    );
  }
}

export default App;

Navbar.js-

import React, { Component } from 'react';
import './Navbar.css';
import { NavLink } from 'react-router-dom';

const isActivefunc = (match, location) => {
    console.log(match, location)
    return match
}

class Navbar extends Component {
    render() {
        return (
            <div className="nav-wrapper">
            <nav className="navbar nav-container pb-3 navbar-expand-md navbar-dark overlay">
            <NavLink exact to="/"className="navbar-brand"></NavLink>
                <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"></span>
                </button>

                <div className="collapse navbar-collapse" id="navbarsExampleDefault">
                <ul className="navbar-nav ml-auto">
                    <li className="nav-item active">
                    <NavLink  
                        isActive={isActivefunc} 
                        exact activeClassName="active"
                        className="nav-link text-uppercase"
                        to="/">Inicio</NavLink>
                    </li>
                    <li className="nav-item dropdown">
                    <NavLink exact to="/Servicios" activeClassName="active" className="nav-link text-uppercase dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Servicios</NavLink>
                    <div className="dropdown-menu" aria-labelledby="dropdown01">
                        <NavLink exact to="/Gamification" activeClassName="main-nav-active-dropdown" className="dropdown-item text-uppercase font-weight-bold">Gamification Projects</NavLink>
                        <NavLink exact to="/TotalMultimedia" activeClassName="main-nav-active-dropdown" className="dropdown-item text-uppercase font-weight-bold">Total Multimedia</NavLink>
                        <NavLink exact to="/ELearning" activeClassName="main-nav-active-dropdown" className="dropdown-item text-uppercase font-weight-bold">Full E-Learning Platform</NavLink>
                        <NavLink exact to="/AbsoluteEngagement" activeClassName="main-nav-active-dropdown" className="dropdown-item text-uppercase font-weight-bold">Absolute Engagement Program</NavLink>
                    </div>
                    </li>
                    <li className="nav-item">
                    <NavLink exact to="/Nosotros" activeClassName="active" className="nav-link text-uppercase">Nosotros</NavLink>
                    </li>
                    <li className="nav-item">
                    <NavLink exact to="/Contacto" activeClassName="active" className="nav-link text-uppercase">Contacto</NavLink>
                    </li>

                </ul>
                </div>
            </nav> 
            </div>
        );
    }
}

export default Navbar

主页-

import React, { Component } from 'react';
import './Inicio.css';
import { Link } from 'react-router-dom';

import Navbar from '../components/Navbar';
import Jumbotron1 from '../components/Jumbotron1';
import Footer from '../components/Footer';




class Inicio extends Component {
    render() {
       return (
        <div>
            <Navbar />
            <Jumbotron1 />
            <div className="content-container mt-3 mb-1 pt-5 pb-5">
                <div className="content-img-1">
                    <div className="image-inner">    
                        <div className="caption-background">
                            <div className="caption caption text-center pt-1 text-uppercase">1. Total Multimedia</div>
                            <div className="sub-caption text-center pb-1">
                                <h3>Realizamos sus tutoriales, videos, descargables y más, la mejor experiencia en capacitación</h3>
                            </div>
                            <div className="button-holder">
                                <Link to='/TotalMultimedia' className="btn btn-primary text-uppercase" role="button">Ver Detalles</Link>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="content-container mb-2 pt-5 pb-5">
                <div className="content-img-2">
                    <div className="image-inner">    
                        <div className="caption-background">
                            <div className="caption caption text-center pt-1 text-uppercase">2. Gamification Projects</div>
                            <div className="sub-caption text-center pb-1">
                                <h3>Desarrollamos el potencial de cada persona con juegos, aplicaciones y más, las herramientas más innovadoras en capacitación</h3>
                            </div>
                            <div className="button-holder">
                                <Link to='/Gamification' className="btn btn-primary text-uppercase" role="button">Ver Detalles</Link>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="content-container mb-2 pt-5 pb-5">
                <div className="content-img-3">
                    <div className="image-inner">    
                        <div className="caption-background">
                            <div className="caption caption text-center pt-1 text-uppercase">3. Full E-Learning Platform</div>
                            <div className="sub-caption text-center pb-1">
                                <h3>Creamos una plataforma para todos sus materiales de formación, totalmente interactivos y atractivos</h3>
                            </div>
                            <div className="button-holder">
                                <Link to='/ELearning' className="btn btn-primary text-uppercase" role="button">Ver Detalles</Link>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="content-container mb-2 pt-5">
                <div className="content-img-4">
                    <div className="image-inner">    
                        <div className="caption-background">
                            <div className="caption caption text-center pt-1 text-uppercase">4. ABSOLUTE ENGAGEMENT PROGRAM</div>
                            <div className="sub-caption text-center pb-1">
                                <h3>El poder de todas nuestras soluciones en un solo programa incomparable</h3>
                            </div>
                            <div className="button-holder">
                                <Link to='/AbsoluteEngagement' className="btn btn-primary text-uppercase" role="button">Ver Detalles</Link>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="content-container text-center mb-2 pt-5 pb-5">
                <div className="row">
                    <div className="col-lg-3 col-md-6 spacing">
                        <Link to='/TotalMultimedia' className="blue-links">Multimedia</Link>
                    </div>
                    <div className="col-lg-3 col-md-6 spacing">
                    <Link to='/Gamification' className="blue-links">Gamification</Link>
                    </div>
                    <div className="col-lg-3 col-md-6 spacing">
                    <Link to='/ELearning' className="blue-links">Platform</Link>
                    </div>
                    <div className="col-lg-3 col-md-6 spacing">
                    <Link to='/AbsoluteEngagement' className="blue-links">Absolute Program</Link>
                    </div>
                </div>
            </div>
            <div class="images-section pt-3 pb-3">
                <div class="container pt-5 pb-5">
                    <div class="owl-carousel owl-theme">
                        <div class="item"><img class="grey" src="/assets/img/Renault-e1437433948637.jpg" alt="" /></div>
                        <div class="item"><img class="grey" src="/assets/img/hsbc.jpg" alt="" /></div>
                        <div class="item"><img class="grey" src="/assets/img/hiab.jpg" alt="" /></div>
                        <div class="item"><img class="grey" src="/assets/img/ge.jpg" alt="" /></div>
                        <div class="item"><img class="grey" src="/assets/img/holiday-inn.jpg" alt="" /></div>
                        <div class="item"><img class="grey" src="/assets/img/toyota.jpg" alt="" /></div>
                    </div>
                </div>
            </div>
            <Footer />
        </div>
       );
    }
}

export default Inicio

演示站点位于https://rrspark.com/lionsfieldcom

1 个答案:

答案 0 :(得分:0)

我发现了问题。我只是忘了删除我复制的引导程序示例附带的活动类(剪切和粘贴的危险)。可以在Navbar.js文件中的nav-item类之后看到该问题。