朝活139日目　クエリパラメータからポイントを表示

この実装もしなきゃだ

<ListItemButton>
<ListItemIcon>
<DashboardIcon />
</ListItemIcon>
<ListItemText primary="Dashboard" />
</ListItemButton>

ドロップダウンのメニューにして複数のポイント名を表示、ポイント名をリンク付きのボタンにしたい

ChatGPT

ChatGPT

Reactでドロップダウンメニューを実装し、各ポイント名を選択可能なリンクとして設定するためには、Material-UI（現在はMUIとして知られています）の Menu および MenuItem コンポーネントを利用する方法が一般的です。以下のステップで、リストアイテムをドロップダウンメニューに変換し、各ポイントへのリンクを設定します。

1. 必要なコンポーネントのインポート

まずは、必要なMUIコンポーネントをインポートします。

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import DashboardIcon from '@mui/icons-material/Dashboard';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import IconButton from '@mui/material/IconButton';
import MoreVertIcon from '@mui/icons-material/MoreVert';

2. ドロップダウンメニューの実装

次に、ドロップダウンメニューを持つコンポーネントを実装します。これには、useState を使用してメニューの開閉状態を管理します。

function DropdownMenu() {
  const [anchorEl, setAnchorEl] = useState(null);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  // ポイント名とリンクのリスト
  const points = [
    { name: 'Point1', link: '/points/point1' },
    { name: 'Point2', link: '/points/point2' },
    // 他のポイントも同様に追加
  ];

  return (
    <div>
      <ListItemButton onClick={handleClick}>
        <ListItemIcon>
          <DashboardIcon />
        </ListItemIcon>
        <ListItemText primary="Dashboard" />
        <IconButton size="small">
          <MoreVertIcon />
        </IconButton>
      </ListItemButton>
      <Menu
        anchorEl={anchorEl}
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        {points.map((point) => (
          <MenuItem key={point.name} onClick={handleClose} component={Link} to={point.link}>
            {point.name}
          </MenuItem>
        ))}
      </Menu>
    </div>
  );
}

3. コンポーネントの使用

最後に、作成した DropdownMenu コンポーネントをアプリケーション内で使用します。

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Dashboard />} />
        <Route path="/points/:point" element={<Dashboard />} />
      </Routes>
      <DropdownMenu />  // ドロップダウンメニューを表示
    </Router>
  );
}

このコードは、ダッシュボードリンクをクリックするとメニューが開き、異なるポイントへのリンクが表示されるようにします。各メニューアイテムは Link コンポーネントを使用しており、選択したポイントの Dashboard コンポーネントにルーティングされます。

---

まあまずは動的に移動。

よしー
なんとかクエリパラメータから取れるようになった！！

あとはポイントのボタンと、ポイントの位置情報の読み込みだー

ただボタンの配置の時に色々いじらないといけないから時間かかりそう。

今日はここまで