CODEWITHSUNDEEP
cssreactjsreact-router
Irakli Tchigladze
Irakli Tchigladze

Reputation: 723

Problem with React Router NavLink and activeClassName

My First problem is that, I have three links in menu. Home, About and Add Food. NavLink activeClassName works as expected , except for this : Home always stays active, even when i move to other links. In the screenshot, i've moved to /about page, but Home *li stays active. enter image description here

Secondly, for some reason, border radius doesn't work on these items. Is it because they have substantial padding?

my code : 

   import React from "react";
import { NavLink } from "react-router-dom";
const Navbar = (props) => {
  return (
    <nav>
      <ul>
        <NavLink to="/" activeClassName="active-navlink">
          <li>Home</li>
        </NavLink>
        <NavLink to="/about" activeClassName="active-navlink">
          <li>About</li>
        </NavLink>
        <NavLink to="/add-food" activeClassName="active-navlink">
          <li>Add Food</li>
        </NavLink>{" "}
      </ul>
    </nav>
  );
};

export default Navbar;

and my Router, where all the links are handled : 

<Router>
      {" "}
      <div className="App">
        <Navbar></Navbar>
        <Switch>
          <Route path="/about" component={About}></Route>
          <Route
            path="/products/:food"
            render={(props) => (
              <IndividualProduct {...props}></IndividualProduct>
            )}
          ></Route>
          <Route
            path="/"
            exact
            render={(props) => (
              <Home
                {...props}
                groceryList={groceryList}
                orderTotal={orderTotal}
                setOrderTotal={setOrderTotal}
                productsInCart={productsInCart}
                updateProductsInCart={updateProductsInCart}
              ></Home>
            )}
          ></Route>
          <Route component={NotFound}></Route>
        </Switch>
      </div>
    </Router>

Upvotes: 0

Views: 582

Answers (1)

Oleg Levin
Oleg Levin

Reputation: 3621

1. Add exact to Navlink of '/':

  <NavLink to="/" activeClassName="active-navlink" exact={true}  >
        <li>Home</li>
  </NavLink>
  1. Styling sample:

https://codepen.io/k3no/pen/OXgXOb

Upvotes: 2

Related Questions