App.js:

import './App.css';
import logo from './images/logo.png';
import Home from './components/Home';
import About from './components/About';
import Calculators from './components/Calculators';
import Classes from './components/Classes';
import Riddles from './components/Riddles';
import { useRoutes, BrowserRouter as Router } from 'react-router-dom';

const MenuBar = () => {
  return (
    <header className='App-header'>
    <div className="container">
      <a id="home" className="content-tab" href="/"> Home</a>
      <a id="about" className="content-tab" href="/about"> About</a>
      <a id="calcs" className="content-tab" href="/calculators">  Calculators</a>
      <a id="riddles" className="content-tab" href="/riddles">Riddles</a>
      <a id="classes" className="content-tab" href="/classes">Classes</a>
    </div>
  </header>
  )
}

const App = () => {
  let routes = useRoutes([
    { path: "/", element: <Home /> },
    { path: "about", element: <About /> },
    { path: "classes", element: <Classes />},
    { path: "calculators", element: <Calculators />},
    { path: "riddles", element: <Riddles /> },
    // ...
  ]);
  return routes;
};

function AppWrapper() {
  return (
    <div className="App">
      <MenuBar />
      <Router>
        <App />
      </Router>
    </div>
  );
}

export default AppWrapper;

Now, I want to make that whenever you select a page, like home, about, calculators, etc; it marks the link using border-bottom: 1px solid white;, but when using

.container a.active {
  border-bottom: 1px solid white;
} 

It just doesn't work. Any ideas why? Can it be because it's redirecting to a different url? If so, then should I also import app.css into my Home, About, etc components?

CodePudding user response：

You should be using Link, or NavLink if you want to apply active styling, instead of the raw anchor <a /> tag. Use the function callback for the className prop which is passed an isActive prop.

NavLink

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

const MenuBar = () => {
  const getLinkClassNames = ({ isActive }) => [
    "content-tab",
    isActive ? "active-tab" : null,
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <header className='App-header'>
      <div className="container">
        <NavLink
          id="home"
          className={getLinkClassNames}
          to="/"
        >
          Home
        </NavLink>
        <NavLink
          id="about"
          className={getLinkClassNames}
          to="/about"
        >
          About
        </NavLink>
        <NavLink
          id="calcs"
          className={getLinkClassNames}
          to="/calculators"
        >
          Calculators
        </NavLink>
        <NavLink
          id="riddles"
          className={getLinkClassNames}
          to="/riddles"
        >
          Riddles
        </NavLink>
        <NavLink
          id="classes"
          className={getLinkClassNames}
          to="/classes"
        >
          Classes
        </NavLink>
      </div>
    </header>
  );
}

CSS

.active-tab {
  border-bottom: 1px solid white;
}

If you prefer the v5 syntax then create a custom NavLink component.

import { NavLink as BaseNavLink } from "react-router-dom";

const NavLink = React.forwardRef(
  ({ activeClassName, activeStyle, ...props }, ref) => {
    return (
      <BaseNavLink
        ref={ref}
        {...props}
        className={({ isActive }) =>
          [
            props.className,
            isActive ? activeClassName : null
          ]
            .filter(Boolean)
            .join(" ")
        }
        style={({ isActive }) => ({
          ...props.style,
          ...(isActive ? activeStyle : null)
        })}
      />
    );
  }
);

Usage:

<NavLink
  id="home"
  className="content-tab"
  activeClassName="active-tab"
  to="/"
>
  Home
</NavLink>