active MDBNavItem vs. React Router

ecelements commented 5 years ago

Thank you Konrad. Unfortunately this doesn't work well for child components with links. And, of course, it's pretty elaborate.

Maybe it can be solved via CSS? MDBNavLink already seems to support activeClassName.

Konrad Stępień staff commented 5 years ago

Hi @ecelements,

I thought you needed to use this on NavItem.

From what you say, activeClassName works fine.

I see , only tabs and pills have styles for active class in MDBNavLink.

 <MDBNav tabs color='indigo'>
  <MDBNavItem>
    <MDBNavLink to='' activeClassName='active' >
      Active
    </MDBNavLink>
  </MDBNavItem>
  <MDBNavItem>
    <MDBNavLink to='/page1' activeClassName='active'>
      Link 1
    </MDBNavLink>
  </MDBNavItem>
  <MDBNavItem>
    <MDBNavLink to='/page2' activeClassName='active'>
      Link 2
    </MDBNavLink>
  </MDBNavItem>
  <MDBNavItem>
    <MDBNavLink to='/page3' activeClassName='active'>
      Link 3
    </MDBNavLink>
  </MDBNavItem>
</MDBNav>

And it looks like this:

It is good for you?

Best regards, Konrad.

ecelements commented 5 years ago

Hello Konrad, unfortunately it doesn't work with <MDBNavbarNav>:

<MDBNavbarNav>
  <MDBNavItem>
    <MDBNavLink to="" activeClassName="active">Active</MDBNavLink>
  </MDBNavItem>
</MDBNavbarNav>

Do you see an easy way to solve it?

Konrad Stępień staff commented 5 years ago

Hi @ecelements,

It seems like a bug. We will try to fix it maybe in this release.

If you want a solution for now, can you try something like this?

I did add this line for my Routers.js file:

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

import HomePage from './pages/HomePage';
import MyPage1 from './pages/Page1';
import MyPage2 from './pages/Page2';
import MyPage3 from './pages/Page3';

class Routes extends React.Component {
  render() {
    return (
      <Switch>
        <Route exact path='/ ' component={HomePage} />  // My new file
        <Route exact path='/' component={HomePage} />
        <Route exact path='/page1' component={MyPage1} />
        <Route exact path='/page2' component={MyPage2} />
        <Route exact path='/page3' component={MyPage3} />

        <Route
          render={function() {
            return <h1>Not Found</h1>;
          }}
        />
      </Switch>
    );
  }
}

export default Routes;

And then try something like this:

<MDBNavbarNav>
  <MDBNavItem>
    <MDBNavLink to="/ " activeClassName="active">Active</MDBNavLink> //Space in "to" property
  </MDBNavItem>
</MDBNavbarNav>

If you found new bugs, please tell me about it.

Sorry about that and I hope this solves your problems.

Best regards, Konrad.

ronald.barrera commented 5 years ago

I have the same problem, I can't have the active to show up.

Konrad, I tried your suggestion, but still not working. Any other suggestions?

Jakub Chmura staff premium commented 5 years ago

Can you give me more details? Mabe send me a sample of your code? Without more information, I'll not be able to help you.

Best, Kuba