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;
In order to have the links marked with border-bottom: 1px solid white; when selected, you tried using this CSS rule:
.container a.active {
border-bottom: 1px solid white;
}
However, it doesn't seem to work as expected. You're wondering if this could be due to the redirection to different URLs and are considering importing App.css into your Home, About, etc components.
Any thoughts on why the styling isn't being applied correctly?