Реагировать на то, что большой календарь не отображается или не загружается вообще

Question

Я пытаюсь использовать react-big-calendar в своем школьном проекте, но календарная сетка вообще не загружается. Вот мой Календарь. js компонент:

import React from 'react';
import { Calendar, momentLocalizer} from 'react-big-calendar'
import moment from 'moment';

export default function TrainingCalendar() {
    const localizer = momentLocalizer(moment)

    const myEventList = {
        title: 'test',
        start: new Date(2020, 12, 9, 12),
        end: new Date(2020, 12, 9, 13),
        allDay: 'false',
    };

    return (
        <Calendar 
        localizer={localizer}
        events={myEventList}
        startAccessor='start'
        endAccessor='end'
        views={['month', 'day', 'agenda']}
        style={{height: 1000}}
        />)
}

Вот мое приложение. js:

import './App.css';
import AppBar from './components/AppBar';



function App() {
  return (
    <div className="App">
        <AppBar />
      </div>
  );
}

export default App;

Здесь это AppBar. js, если это вообще помогает (панель приложений и ящик из material-ui)

import React, { useState } from 'react';
import { Divider, Drawer, List, ListItem, ListItemText, ListItemIcon, IconButton,
   AppBar, Toolbar, Typography} from '@material-ui/core';
import { BrowserRouter, Switch, Route, Link } from 'react-router-dom';
import AccountBoxIcon from '@material-ui/icons/AccountBox';
import DirectionsRunIcon from '@material-ui/icons/DirectionsRun';
import MenuIcon from '@material-ui/icons/Menu';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import Customerlist from './Customerlist';
import Traininglist from './Traininglist';
import Calendar from './Calendar';
import TodayIcon from '@material-ui/icons/Today';


export default function Bars() {

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

    const handleDrawerOpen = () => {
        setOpen(true);
      }

    const handleDrawerClose = () => {
        setOpen(false);
      }

    return(
        <div>
          <AppBar position="static">
          <Toolbar>
            <IconButton onClick={handleDrawerOpen} 
              edge="start" 
              className={Bars.menuButton} 
              color="inherit" 
              aria-label="menu">
            <MenuIcon />
            </IconButton>
          <Typography variant="h6"
            color='inherit'>
            Personal trainer
          </Typography>
        </Toolbar>
        </AppBar>
        <BrowserRouter>
        <Drawer
        className={Bars.drawer}
        variant="persistent"
        anchor="left"
        open={open}
        classes= {{
          paper: Bars.drawerPaper,
        }}
      >
        <div className={Bars.drawerHeader}>
          <IconButton onClick={handleDrawerClose}>
            <ChevronLeftIcon />
          </IconButton>
        </div>
        <Divider />
        <List>
          <ListItem button component={Link} to='/' onClick={() => Customerlist} >
            <ListItemIcon><AccountBoxIcon /></ListItemIcon>
            <ListItemText primary='Customers' />
          </ListItem>
          <ListItem button component={Link} to='/trainings' onClick={() => Traininglist} >
            <ListItemIcon><DirectionsRunIcon /></ListItemIcon>
            <ListItemText primary='Trainings' />
          </ListItem>
          <ListItem button component={Link} to='/calendar' onClick={() => Calendar()}>
            <ListItemIcon><TodayIcon /></ListItemIcon>
            <ListItemText primary='Calendar'></ListItemText>
          </ListItem>
        </List>
      </Drawer>
      <Switch>
        <Route exact path='/' component={Customerlist}/>
        <Route path='/trainings' component={Traininglist} />
      </Switch>
      </BrowserRouter>
        </div>
    );
}

А вот мой packacge. json

{
  "name": "personaltrainer",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@date-io/date-fns": "1.x",
    "@fullcalendar/core": "^4.4.0",
    "@fullcalendar/daygrid": "^4.4.0",
    "@fullcalendar/react": "^4.4.0",
    "@material-ui/core": "^4.9.9",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/pickers": "^3.2.10",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "date-fns": "^2.12.0",
    "lodash": "^4.17.15",
    "material-table": "^1.57.2",
    "moment": "^2.24.0",
    "react": "^16.13.1",
    "react-big-calendar": "^0.24.6",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1",
    "recharts": "^1.8.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Может ли кто-нибудь помочь мне решить проблему здесь или указать аналогичный вопрос с ответом. Заранее спасибо

Answer 1

Нашел свою проблему. Я не направлял календарь в свой ящик. У меня роутер был такой:

<Switch>
        <Route exact path='/' component={Customerlist}/>
        <Route path='/trainings' component={Traininglist} />
</Switch>

Но должно было быть так:

<Switch>
        <Route exact path='/' component={Customerlist}/>
        <Route path='/trainings' component={Traininglist} />
        <Route path='/calendar' component={Calendar} />
</Switch>

Answer 2

Либо мне что-то не хватает, но где ваш AppBar Компонент? В AppBar. js экспортируется только компонент Bars, но не AppBar.

Вы импортируете AppBar из @ material-ui / core и используете его с компонентом Bars .

Вы должны использовать экспортированный компонент в приложении. js:

function App() {
  return (
    <div className="App">
        <Bars />
    </div>
  );
}