Browser Router resetting state/context value to default regardless of it being placed outside of its scope

I'm trying to create a simple page using Browser Router. Navigation consist of 7 categories, 6 of which link to "/category/:categoryName", and 1 links back to root. I need to keep track of the selected category name in order to fetch correct data and some other minor things, so I created a separate .tsx file which utilizes state as value for context. Context provider is placed above router's scope (as far as my understanding of everything goes). When any icon is clicked, router correctly changes the URL, however in every case something is causing the page to refresh(logs in console get erased and start again from scratch) and the state/context value gets reset back to default. I've been stuck on this for days and can't figure out what is causing this behaviour. I tried to switch to hash router in a moment of desparation, and the code works perfectly with it, however continuing to use it instead of browser router complicates my code more than necessary since i can't simply link back to root. I'm providing the relevant code, Nav component is rendered from inside the Header component

Context file:

import { createContext , useState, useEffect} from "react";
export const SelectedCategoryContext = createContext({
selectedCategory: "home",
setSelectedCategory: (categoryName: string) => {}
});
const SelectedCategoryProvider = ({children}: any) => {
const [selectedCategory, setSelectedCategory] = useState("home");
useEffect(() => {
console.log("SC context", selectedCategory);
}, [selectedCategory]);
return (
<SelectedCategoryContext.Provider value={{selectedCategory, setSelectedCategory}}>
{children}
</SelectedCategoryContext.Provider>
);
};
export default SelectedCategoryProvider;

App.tsx:

import "./App.scss";
import Header from "./components/Header";
import { useEffect, useState } from "react";
import { Routes, Route, BrowserRouter } from "react-router-dom";
import Homepage from "./pages/Homepage";
import Category from "./pages/Category";
import SelectedCategoryProvider from "./components/SelectedCategoryContext";
const App = () => {
return (
<SelectedCategoryProvider
>
<BrowserRouter>
<Header />
<Routes>
<Route path="/" element={<Homepage />} />
<Route
path="/category/:categoryName"
element={<Category />}
/>
</Routes>
</BrowserRouter>
</SelectedCategoryProvider>
);
};
export default App;

**Segment cut out from Nav.tsx as the remainder of code repeats itself just with different category names & svgs:

import { MouseEventHandler, useContext, useEffect } from "react";
import "./nav.scss";
import { Link } from "react-router-dom";
import {ToggleMenuContext } from "../../util/context";
import { SelectedCategoryContext } from "../SelectedCategoryContext";
const Nav = () => {
const { selectedCategory, setSelectedCategory } = useContext(
SelectedCategoryContext
);
const { setIsMenuOpen, setIsHamburgerClicked } =
useContext(ToggleMenuContext);
const handleNavClick: MouseEventHandler<HTMLLIElement> = (e) => {
e.stopPropagation();
setSelectedCategory(e.currentTarget.id);
setIsMenuOpen(false);
setIsHamburgerClicked(false);
};
useEffect(() => {
console.log(selectedCategory);
}, [selectedCategory]);
return (
<nav>
<ul>
<Link to="/">
<li
id="home"
onClick={handleNavClick}
className={
selectedCategory === "home"
? "li selected-nav"
: "li"
}
>
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M19.7557 9.41083L10.589... 9.64916 19.7557 9.41083Z"
fill="#8d8d8c"
/>
</svg>
<span>Home</span>
</li>
</Link>
<Link to="/category/general">
<li
id="general"
onClick={handleNavClick}
className={
selectedCategory === "general"
? "li selected-nav"
: "li"
}
>
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
id="News"
fillRule="evenodd"
clipRule="evenodd"
d="M17.5 5.83332C18.8807.......15.0392Z"
fill="#8d8d8c"
/>
</svg>
<span>General</span>
</li>
</Link>

I've tried placing context provider in index.tsx and keeping needed state at the top level of App.tsx but nothing changed. I don't know Redux yet and don't have time to learn it before having to finish this project. Please help me if you have any suggestions or ideas.

From what I could finally see in your code, the only issue I found that was causing the app to remount, and reset state, was that the Link component was being rendered as the child element of the ul element. The li is what should be rendered as the child of ul. When swapping the positions of li and Link the component no longer lost the state.

That said, it looks like the SelectedCategoryContext Context and provider exists only to allow the navbar to highlight the current category tile. Since the tiles are coupled to links it's a bit redundant to basically duplicate the URL path matching. I suggest using the NavLink component and utilizing its isActive state to know which link/tile/card is the actively matched one.

Example:

import { MouseEventHandler, useContext } from "react";
import "./nav.scss";
import { NavLink } from "react-router-dom";
import { ToggleMenuContext } from "../../util/context";

const Nav = () => {
  const { setIsMenuOpen, setIsHamburgerClicked } =
    useContext(ToggleMenuContext);

  const handleNavClick: MouseEventHandler<HTMLAnchorElement> = (e) => {
    setIsMenuOpen(false);
    setIsHamburgerClicked(false);
  };

  return (
    <nav>
      <ul>
        <li>
          <NavLink
            onClick={handleNavClick}
            to="/"
            end
            className={({ isActive }) => (isActive ? "li selected-nav" : "li")}
          >
            ...
            <span>Home</span>
          </NavLink>
        </li>
        <li>
          <NavLink
            to="/category/general"
            onClick={handleNavClick}
            className={({ isActive }) => (isActive ? "li selected-nav" : "li")}
          >
            ...
            <span>General</span>
          </NavLink>
        </li>
        <li>
          <NavLink
            to="/category/business"
            onClick={handleNavClick}
            className={({ isActive }) => (isActive ? "li selected-nav" : "li")}
          >
            ...
            <span>Business</span>
          </NavLink>
        </li>
        <li>
          <NavLink
            to="/category/health"
            onClick={handleNavClick}
            className={({ isActive }) => (isActive ? "li selected-nav" : "li")}
          >
            ...
            <span>Health</span>
          </NavLink>
        </li>
        <li>
          <NavLink
            to="/category/science"
            onClick={handleNavClick}
            className={({ isActive }) => (isActive ? "li selected-nav" : "li")}
          >
            ...
            <span>Science</span>
          </NavLink>
        </li>
        <li>
          <NavLink
            to="/category/sports"
            onClick={handleNavClick}
            className={({ isActive }) => (isActive ? "li selected-nav" : "li")}
          >
            ...
            <span>Sports</span>
          </NavLink>
        </li>
        <li>
          <NavLink
            to="/category/technology"
            onClick={handleNavClick}
            className={({ isActive }) => (isActive ? "li selected-nav" : "li")}
          >
            ...
            <span>Technology</span>
          </NavLink>
        </li>
      </ul>
    </nav>
  );
};

export default Nav;

The Category component should use the useParams hook from react-router-dom to access the current categoryName route path param.

import { useContext, useEffect } from "react";
import "./category.scss";
import { useParams } from "react-router-dom";

const Category = () => {
  const { categoryName } = useParams();

  return (
    <>
      <h1>{categoryName}</h1>
    </>
  );
};

export default Category;