MUI 抽屉未使用 React-router-dom v6 呈现

Question

我正在使用 ReactJS，我正在尝试让一个抽屉/菜单在每个页面上显示我的不同路线（很明显）。

所以我在 index.js 中使用 react-router-dom@v6 配置了不同的路由。我可以通过直接在 URL 中输入 link 来访问我的页面并查看内容（目前是简单的文本）。

但由于某些原因，我无法显示我的 Material UI 抽屉（在每个页面中）。但是我在 BrowserRouter 调用我的抽屉。我想我错过了一些重要的事情。

所以这是我创建抽屉的代码：

//src/pages/navigation/menuDrawer.js

import {React, useState, useEffect} from 'react'

// Material UI
import Drawer from '@mui/material/Drawer';
import List from '@mui/material/List';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import { Collapse } from '@mui/material';
import Tooltip from '@mui/material/Tooltip';
import Grid from '@mui/material/Grid';
import { styled } from '@mui/material/styles';

// Icônes 
import ExpandLess from '@mui/icons-material/ExpandLess';
import ExpandMore from '@mui/icons-material/ExpandMore';
import StarBorder from '@mui/icons-material/StarBorder';

// Routing
import { Link } from "react-router-dom";

// Remplissage / Informations
const  NAVIGATION = require('./navigation.json'); // Data

export default function MenuDrawer() {

    // Variables
    const [open, setOpen] = useState(false);

    // Handlers
    // Handler : Ouvrir / Fermer une liste d'item
    const handleButtonItem = () => {
        setOpen(!open);
    }

  return (
    <Grid>
        <Drawer variant="permanent" anchor="left">
            {NAVIGATION.map((item) => {
                <Grid>
                    <ListItemButton onClick={handleButtonItem}>
                        <ListItemIcon>
                            <img src={item.icone} alt="Logo groupe" />;
                        </ListItemIcon>
                        <ListItemText primary={item.nom}></ListItemText>
                        {open ? <ExpandLess/> : <ExpandMore/> }
                    </ListItemButton>

                    <Collapse in={open}>
                        {item.sections.map((section, index) => {
                            <Grid>
                                <Link to={section.url}>
                                    <List>
                                        <Tooltip title={section.descr} placement="right">
                                            <ListItemButton>
                                                <ListItemText primary={section.titre} />
                                            </ListItemButton>
                                        </Tooltip>
                                    </List>
                                </Link>
                            </Grid>
                        })}
                    </Collapse>
                </Grid>
                })
            }
        </Drawer>
    </Grid>
  )
}

我通过 consoles.log() 检查了我的“导航”。json returns 一些东西并且我正确地处理了它。我有我的数据。即使 React 一直给我这样的警告：

Array.prototype.map() expects a return value from arrow function array-callback-return

以及我的 index.js 中用于路线的代码：

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';

// React-router-dom V6
import {BrowserRouter, Routes, Route } from 'react-router-dom'

// Import des pages
// import App from './App';
import Accueil from './pages/accueil';
import About from './pages/about';
import Auth from './auth/authentification'

// Import du Drawer
import MenuDrawer from './components/navigation/menuDrawer'

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <MenuDrawer/>
      <Routes>
        {/* Exemple of Route */}
        <Route path="/" element={<Auth/>} />
        <Route path="/about" element={<About/>} />
        <Route path="*" element={<Accueil/>} />
      </Routes>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

如您所见，我在 BrowserRouter 标签下调用了我的 MUI 组件

PS ：我认为我的 handleButtonItem 有问题（几个按钮的相同变量）但我认为这不是我当前问题的原因

Answer 1

Array.prototype.map() expects a return value from arrow function array-callback-return

警告告诉您传递给您的 map() 调用之一的回调没有 return 值。在您的场景中，这是指：

{NAVIGATION.map((item) => {
    <Grid>
        ...
    </Grid>
})}

您忘记了 return 一个值，具体方法是：

{NAVIGATION.map((item) => {
    return (
        <Grid>
            ...
        </Grid>
    );
})}

或者用 ( 和 ) 替换 { 和 }，这将导致箭头函数隐式 return 传递的结果表达式。

{NAVIGATION.map((item) => (
    <Grid>
        ...
    </Grid>
))}

当你使用大括号时，意味着你传递了一个可以包含多个语句的代码块。 JavaScript 在这种情况下不假定 return 值，所以如果你想 return 某些东西，你必须明确地使用 return 关键字，就像普通函数一样。

如果不使用大括号，则只能提供一个自动 returned 的表达式。

numbers.map((n) => {
  return n * 2;
})

// Is equivalent to
numbers.map((n) => n * 2)

参见：Arrow function expressions - Function body MDN。

现在想象 n * 2 是一个非常长的表达式，就像它们在 React 中经常出现的那样。你想将它分布在多行中。

numbers.map((n) =>
  n * 2
)

为了更明显地表明n * 2是箭头函数的表达式，人们通常会添加额外的括号。

numbers.map((n) => (
  n * 2
))

MUI 抽屉未使用 React-router-dom v6 呈现

MUI Drawer not rendering with React-router-dom v6

javascript

reactjs

material-ui