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

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

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

今回は、Drawerのボタンを押下して画面遷移するていで進めています。
```typescript
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へ遷移した際の結果はこのようになります。

![スクリーンショット 2023-12-31 1.49.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2525908/69998516-2c35-3287-adce-e53cfd0f1384.png)

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

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

```typescript
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`クラスを指定するでもいけそうです。
むしろこちらの方が良い感じかもしれん。