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>
1 Reply
rare-sapphireOP•2y ago
I found the solution! I'm posting it here for anyone who may ask the same question. I currently discovered API section of documentation and it enlightened me.
const matchRoute = useMatchRoute()
const isRouteMatch = (path) => { return !!matchRoute({ to: path }); };
const isRouteMatch = (path) => { return !!matchRoute({ to: path }); };