Finding Active Sidebar Button without Link Component
Hey guys, I'm trying to use JoyUI(new beautiful component library of material ui team) with Tanstack Router but I have a problem. Before that, I was using my own sidebar button components with Tanstack's Link component in the sidebar so activeProps was enough for me to highlight selected navigation button. But now I'm using ListItemButton from JoyUI and it has a 'selected' field prop which takes a boolean value and styles button accordingly. But I don't know how to set its value in a way that it will change accordingly. I can find a solution using css classes but I don't want to do that. What is the best way of doing this?
I tried the following code but it only works when I refresh the page. This is probably because changes in route doesn't cause re-renders. Isn't it suppose to cause re-renders since route is a hook?:
const router = useRouter();
<ListItem>
<ListItemButton onClick={() => navigate({ to: "/results" })} selected={router.state.location.pathname == "/results"}>
<BarChartIcon />
<ListItemContent>
<Typography level="title-sm">Results</Typography>
</ListItemContent>
</ListItemButton>
</ListItem>
I tried the following code but it only works when I refresh the page. This is probably because changes in route doesn't cause re-renders. Isn't it suppose to cause re-renders since route is a hook?:
const router = useRouter();
<ListItem>
<ListItemButton onClick={() => navigate({ to: "/results" })} selected={router.state.location.pathname == "/results"}>
<BarChartIcon />
<ListItemContent>
<Typography level="title-sm">Results</Typography>
</ListItemContent>
</ListItemButton>
</ListItem>
