[React] MUI✖️react-router-dom - 画面遷移に使ったボタンのレイアウトをユーザーがその画面に滞在している間のみ変更する方法

はじめに

react-router-domとMUIとの連携を行う際に少々詰まったので、備忘録として残しておきますが、
これがどなたかの参考になったりしたら嬉しいです。

結論

以下のように、react-router-domのNavLinkを使用し、DOM要素のaria-current属性を直接指定する。

今回は、Drawerのボタンを押下して画面遷移するていで進めています。

import { Drawer, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
import {
    MdAutoGraph,
    MdAccountBox,
    MdOutlineShoppingCart,
    MdEditNote,
    MdLock,
    MdBlock,
} from "react-icons/md";
import { NavLink } from "react-router-dom";
import { lightBlue } from "@mui/material/colors";

export const SideBar = () => {
    return (
        <Drawer anchor="left" variant="permanent">
            <List sx={{ paddingTop: 8 }}>
                <ListItem>
                    <ListItemButton
                        component={NavLink}
                        to={"/"}
                        // ↓aria-current属性を直接指定！
                        sx={{ '&[aria-current="page"]': { bgcolor: lightBlue["50"] } }}
                        end
                    >
                        <ListItemIcon>
                            <MdAutoGraph />
                        </ListItemIcon>
                        <ListItemText primary={"Dashboard"} />
                    </ListItemButton>
                </ListItem>
                // etc...
            </List>
        </Drawer>
    );
};

結果

今回の場合、/userのURLへ遷移した際の結果はこのようになります。

最後に

今回はこのような処置を行いましたが、少々荒っぽいやり方かもしれませんね…
もっと良い方法があれば教えていただけますと幸いです。

おまけ

今回書いた部分のファイルのコードの全文を載せておきますので、もし参考になればご活用ください。

import { Drawer, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
import {
    MdAutoGraph,
    MdAccountBox,
    MdOutlineShoppingCart,
    MdEditNote,
    MdLock,
    MdBlock,
} from "react-icons/md";
import { NavLink } from "react-router-dom";
import { lightBlue } from "@mui/material/colors";

export const SideBar = () => {
    return (
        <Drawer anchor="left" variant="permanent">
            <List sx={{ paddingTop: 8 }}>
                <ListItem>
                    <ListItemButton
                        component={NavLink}
                        to={"/"}
                        sx={{ '&[aria-current="page"]': { bgcolor: lightBlue["50"] } }}
                        end
                    >
                        <ListItemIcon>
                            <MdAutoGraph />
                        </ListItemIcon>
                        <ListItemText primary={"Dashboard"} />
                    </ListItemButton>
                </ListItem>
                <ListItem>
                    <ListItemButton
                        component={NavLink}
                        to={"/user"}
                        sx={{ '&[aria-current="page"]': { bgcolor: lightBlue["50"] } }}
                        end
                    >
                        <ListItemIcon>
                            <MdAccountBox />
                        </ListItemIcon>
                        <ListItemText primary={"User"} />
                    </ListItemButton>
                </ListItem>
                <ListItem>
                    <ListItemButton
                        component={NavLink}
                        to={"/product"}
                        sx={{ '&[aria-current="page"]': { bgcolor: lightBlue["50"] } }}
                        end
                    >
                        <ListItemIcon>
                            <MdOutlineShoppingCart />
                        </ListItemIcon>
                        <ListItemText primary={"Product"} />
                    </ListItemButton>
                </ListItem>
                <ListItem>
                    <ListItemButton
                        component={NavLink}
                        to={"/blog"}
                        sx={{ '&[aria-current="page"]': { bgcolor: lightBlue["50"] } }}
                        end
                    >
                        <ListItemIcon>
                            <MdEditNote />
                        </ListItemIcon>
                        <ListItemText primary={"Blog"} />
                    </ListItemButton>
                </ListItem>
                <ListItem>
                    <ListItemButton
                        component={NavLink}
                        to={"/login"}
                        sx={{ '&[aria-current="page"]': { bgcolor: lightBlue["50"] } }}
                        end
                    >
                        <ListItemIcon>
                            <MdLock />
                        </ListItemIcon>
                        <ListItemText primary={"Login"} />
                    </ListItemButton>
                </ListItem>
                <ListItem>
                    <ListItemButton
                        component={NavLink}
                        to={"/*"}
                        sx={{ '&[aria-current="page"]': { bgcolor: lightBlue["50"] } }}
                        end
                    >
                        <ListItemIcon>
                            <MdBlock />
                        </ListItemIcon>
                        <ListItemText primary={"Not Found"} />
                    </ListItemButton>
                </ListItem>
            </List>
        </Drawer>
    );
};

追記

今回、aria-current属性を指定しましたが、actionクラスを指定するでもいけそうです。
むしろこちらの方が良い感じかもしれん。