nav bar menu items flash when clicking between pages

Hello,

Thank you for reaching us.

1) Problem with flashes

Please actualize your version of MDB Pro to version 4.12. It should solve problems with flashes.

2) What is the correct way to make each menu item active when clicked on?

You can store your 'active' state in the state of your component.

If it doesn't help or you have questions please contact us again.

Best regards,

Aliaksandr from MDB.

How do I actualise it to the new version?>

mdbreact": "git+https://oauth2:MYCODE-J@git.mdbootstrap.com/mdb/react/re-pro.git

I got this in my package.json

I am using create-react-app

SIDE QUESTION: Another thing, why do I get 2-3 emails everytime I get a response from support

Hello,

You can actualize your version by following this instruction:

Delete your node_modules folder, then delete package-lock.json and use 'yarn' or 'npm install' command again.

SIDE QUESTION: Another thing, why do I get 2-3 emails everytime I get a response from support.

It was my fault, sorry. It will not happen again.

Best regards,

Aliaksandr from MDB.

I am getting this error when trying to build. I am using CRA without any custom stuff.

Attempted import error: 'Arrow' is not exported from 'react-popper'

3:23:33 PM: > react-scripts build 3:23:36 PM: Creating an optimized production build... 3:24:40 PM: Failed to compile. 3:24:40 PM: ./node_modules/mdbreact/dist/mdbreact.esm.js 3:24:40 PM: Attempted import error: 'Arrow' is not exported from 'react-popper'. 3:24:40 PM: npm 3:24:40 PM: ERR! code ELIFECYCLE 3:24:40 PM: npm 3:24:40 PM: ERR! errno 1

I had to back to version 4.11.1 to make the site build again :(

Be sure you deleted node_modules folder and package-lock.json files.

Can you type 'npm ls react' command in command line and show me the result?

If it still doesn't work try to get our Gitlab repository from branch named next and make the same.

Best regards,

Aliaksandr from MDB.

I did all that

2:10:54 PM: ./node_modules/mdbreact/dist/mdbreact.esm.js 2:10:54 PM: Attempted import error: 'Arrow' is not exported from 'react-popper'.

+-- mdbreact@4.12.0 (git+https://oauth2:MYCODE-J@git.mdbootstrap.com/mdb/react/re-pro.git#9c308706c6272ddd1007b936784895d6d938926d) | -- react@16.8.6 deduped -- react@16.8.6

--

https://git.mdbootstrap.com/mdb/react/re-pro/tree/next << this worked.. now what?

it still flashes between pages

What do you mean by 'flashes'? Can you show me the full code of your application? Seems like a problem with the Routing.

Best regards,

Aliaksandr from MDB.

// HEADER.JS

import React from 'react'; import { MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavbarToggler, MDBCollapse, MDBNavItem, MDBNavLink, MDBIcon } from 'mdbreact';

    import { withRouter } from 'react-router-dom';

import logo from '../images/logo.svg'

import MenuItems from '../data/menuItems.json'
import MenuItemsSocial from '../data/menuItemsSocial.json'


class NavBar extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            collapse: false,
            active: "/"
        };
        this.onClick = this.onClick.bind(this);
    }

    /*
        After rendering, we check the current pathname e.g. lessons
        During the re-rendering of the menu items, we check if this pathname = the path of the menu item
        If so, we set that item as active
    */

    componentDidMount() {
        this.setState({
            active: this.props.location.pathname
        })
    }

    componentDidUpdate(prevProps) {

        if (this.props.location.pathname !== prevProps.location.pathname)
        {
            this.setState({
                active: this.props.location.pathname
            })
        }
    }

    // Collapses the Menu after user clicks a menu item
    onClick() {
        this.setState({
            collapse: !this.state.collapse
        })
    }

    render() {

        let currentPath = this.props.location.pathname

        return (
            <header>

                <MDBNavbar light expand="md" scrolling fixed="top" color="white">

                    <MDBNavbarBrand href="/">
                        <img src={ logo } width="150px" alt="Central - Logo" />
                    </MDBNavbarBrand>

                    <MDBNavbarToggler onClick={ this.onClick } />

                    <MDBCollapse isOpen={ this.state.collapse } navbar>

                        {
                            // Menu Items LHS
                        }
                        <MDBNavbarNav left>
                            {
                                MenuItems.map((item) => (
                                    <MDBNavItem
                                        key={ item["path"] }
                                        onClick={ this.onClick }
                                        active={ currentPath === ("/" + item["path"]).trim() ? true : false }
                                    >
                                        <MDBNavLink to={ item["path"] }>{ item["title"] }</MDBNavLink>
                                    </MDBNavItem>
                                ))
                            }

                        </MDBNavbarNav>


                        {
                            // Menu Items RHS (Social Icons)
                        }
                        <MDBNavbarNav right>

                            {
                                MenuItemsSocial.map((item) => (
                                    <MDBNavItem
                                        key={ item["icon"] }>
                                        <a
                                            href={ item["url"] }
                                            target="_blank"
                                            rel="noopener noreferrer">
                                            <MDBIcon
                                                fab
                                                icon={ item["icon"] }
                                                fixed
                                                className="mx-1 ac-fonts" />
                                        </a>
                                    </MDBNavItem>
                                ))
                            }

                        </MDBNavbarNav>

                    </MDBCollapse>
                </MDBNavbar>

            </header>
        );
    }
}

export default withRouter(NavBar);

// APP.JS

import React, { Component } from 'react';
import { Router, Route, Switch } from "react-router-dom";


// MDBoostrap & CSS
import './App.css'
import { MDBContainer } from "mdbreact";
import { ToastContainer } from 'mdbreact';


// Core Components
import Header from './components/header';

// Lessons
import Lesson1 from './components/lessons/lesson1'
import Lesson2 from './components/lessons/lesson2'
import Lesson3 from './components/lessons/lesson3'
import Lesson4 from './components/lessons/lesson4'
import Lesson5 from './components/lessons/lesson5'
import Lesson6 from './components/lessons/lesson6'
import Lesson7 from './components/lessons/lesson7'
import Lesson8 from './components/lessons/lesson8'
import Lesson9 from './components/lessons/lesson9'
import Lesson10 from './components/lessons/lesson10'
import Lesson11 from './components/lessons/lesson11'
import Lesson12 from './components/lessons/lesson12'
import Lesson13 from './components/lessons/lesson13'
import Lesson14 from './components/lessons/lesson14'
import Lesson15 from './components/lessons/lesson15'
import Lesson16 from './components/lessons/lesson16'
import Lesson17 from './components/lessons/lesson17'
import Lesson18 from './components/lessons/lesson18'

// "Pages"
import Home from './components/pageHome';
import About from './components/pageAbout';
import Contact from './components/pageContact';
import Donate from './components/pageDonate';
import FAQ from './components/pageFAQ';
import NotFound from './components/page404';
import Lessons from './components/pageLessons';
import Settings from './components/pageSettings';

// Google Analytics Implementation
import ReactGA from 'react-ga';
const createHistory = require("history").createBrowserHistory
const history = createHistory()
const snap = navigator.userAgent !== 'ReactSnap';
const production = process.env.NODE_ENV === 'production'

// per the react-snap specific: Usage with Google Analytics
if (production && snap)
{
  ReactGA.initialize('UA-51335467-12');
  history.listen((location, action) => {
    ReactGA.pageview(location.pathname + location.search);
    // console.log(location.pathname)
  });
}


class App extends Component {

  contextMenu = (e) => {
    e.preventDefault();
    //addMenu.popup(e.clientX, e.clientY);
  }

  render() {

    const navStyle = { marginTop: "6.5rem", marginBottom: "2rem" };

    return (

      <div className="App" onContextMenu={ this.contextMenu }      >

        <Router history={ history }>

          <div>

            <Header />

            <main>

              <MDBContainer style={ navStyle }>

                <Switch>

                  {
                    // Pages 
                  }
                  <Route exact path="/" component={ Home } />
                  <Route path="/about" component={ About } />
                  <Route path="/contact" component={ Contact } />
                  <Route path="/donate" component={ Donate } />
                  <Route path="/faq" component={ FAQ } />
                  <Route path="/lessons" component={ Lessons } />
                  <Route path="/settings" component={ Settings } />

                  {
                    // Lessons 
                  }
                  <Route path="/lesson1" component={ Lesson1 } />
                  <Route path="/lesson2" component={ Lesson2 } />
                  <Route path="/lesson3" component={ Lesson3 } />
                  <Route path="/lesson4" component={ Lesson4 } />
                  <Route path="/lesson5" component={ Lesson5 } />
                  <Route path="/lesson6" component={ Lesson6 } />
                  <Route path="/lesson7" component={ Lesson7 } />
                  <Route path="/lesson8" component={ Lesson8 } />
                  <Route path="/lesson9" component={ Lesson9 } />
                  <Route path="/lesson10" component={ Lesson10 } />
                  <Route path="/lesson11" component={ Lesson11 } />
                  <Route path="/lesson12" component={ Lesson12 } />
                  <Route path="/lesson13" component={ Lesson13 } />
                  <Route path="/lesson14" component={ Lesson14 } />
                  <Route path="/lesson15" component={ Lesson15 } />
                  <Route path="/lesson16" component={ Lesson16 } />
                  <Route path="/lesson17" component={ Lesson17 } />
                  <Route path="/lesson18" component={ Lesson18 } />

                  <Route path="*" component={ NotFound } />

                </Switch>



              </MDBContainer>

            </main>

          </div>

        </Router>

        <ToastContainer
          hideProgressBar={ true }
          newestOnTop={ true }
          autoClose={ 3000 }
        />

      </div>

    );
  }
}

export default App;

I tried putting the outisde of the but then it complains, because I use withRouter inside

I also noticed mdbreact requires react-router-dom v4.3 but v5 is out, maybe it is related?

Somebody else had the same issue.. they had to do this...

On click of menu item, some js code is adding height : 0px on the collapse navbar-collapse element (for the closing dropdown animation effect in mobile view) and then removing it after a few miliseconds. Add the following style, it will not allow the height 0 to get applied in desktop views because of higher specificity and important attribute. Hence, the flickering will not occur.

@media (min-width: 768px) { .navbar-expand-md .navbar-collapse { height: auto !important; } }

https://stackoverflow.com/questions/51126378/how-to-fix-a-css-navigation-flashing-issue/51472008

Is this maybe a bug?

Also, you said to use the NEXT branch, when can I use teh main branch again, I am just concerned I will forget to go back.. clearly, something in the NEXT branch is fixing my build problem, so I cannot go to the main branch..

Please, send the full code, because I can do nothing without all imported Components. It will be good if you have a repositrory with this project and just give me the link to it.

Best regards,

Aliaksandr from MDB

What is your email address? It is a private repo I can add you. GitHub

As mentioned, this @media (min-width: 768px) { .navbar-expand-md .navbar-collapse { height: auto !important; } }

fixed the flahsing problem.

Also, today I updated to 4.12.0 AGAIN and it works, I noticed sometimes the build fails for no reason and sometimes it works. After I push non-meaningful updates like just changing some wording in a paragraph.. the builds fail/pass its odd.

So I guess I am good for now.