Add useLocation hook and update NavLink logic in App.tsx
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
import { NavLink, Route, Routes, useNavigate } from 'react-router-dom';
|
import { NavLink, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
|
||||||
import OverviewPage from './pages/OverviewPage';
|
import OverviewPage from './pages/OverviewPage';
|
||||||
import EntryPage from './pages/EntryPage';
|
import EntryPage from './pages/EntryPage';
|
||||||
import QuizPage from './pages/QuizPage';
|
import QuizPage from './pages/QuizPage';
|
||||||
@@ -7,6 +7,7 @@ import './App.css';
|
|||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
const location = useLocation();
|
||||||
const startRandomQuiz = () => {
|
const startRandomQuiz = () => {
|
||||||
navigate(`/quiz?mode=all&nonce=${Date.now()}`);
|
navigate(`/quiz?mode=all&nonce=${Date.now()}`);
|
||||||
};
|
};
|
||||||
@@ -37,7 +38,9 @@ export default function App() {
|
|||||||
</NavLink>
|
</NavLink>
|
||||||
<NavLink
|
<NavLink
|
||||||
to="/entry/random"
|
to="/entry/random"
|
||||||
className={({ isActive }) => (isActive ? 'link active' : 'link')}
|
className={({ isActive }) =>
|
||||||
|
isActive || location.pathname.startsWith('/entry') ? 'link active' : 'link'
|
||||||
|
}
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
startRandomReel();
|
startRandomReel();
|
||||||
|
|||||||
Reference in New Issue
Block a user