reactjs - 为什么在反应中加载我的应用程序时我的页面是空白的

Question

我正在尝试加载我的应用程序。怎么了 ？我只在索引和应用程序文件之间进行了更改。使应用程序包含路线，在索引包含它们之前。

App.js

``import './App.css';
import Lessons from './components/Lessons';
import LoadingHOC from './components/LoadingHOC';
import React,{useEffect,useState} from 'react';
import { Route, BrowserRouter as Router, Switch } from "react-router-dom";
import { ThemeProvider } from "@material-ui/core/styles";
import Header from "./components/Header";
import Footer from "./components/Footer";
import UpdateForm from "./components/UpdateForm";
import Register from "./components/Register";
import CreateLesson from "./components/CreateLesson";
import DeleteLesson from "./components/DeleteLesson";
import Students from "./components/Students";
import Login from "./components/Login";
import theme from "./theme";

function App (){
<ThemeProvider theme={theme}>
       <Router>
          <React.StrictMode>
            <LoadingHOC />
             <Header /> 
             <Switch>
               <Route exact path="/account/register" component={Register} />
               <Route exact path="/account/login" component={Login} />
               <Route path="/create/" component={CreateLesson} />
               <Route path="/delete/" component={DeleteLesson} />
               <Route path="/students" component={Students} />
               <Route path="/:id" component={UpdateForm} />
              <Route exact path="/" component={App} />
             </Switch>
             <Footer />
           </React.StrictMode>
         </Router>
    </ThemeProvider>
  );
}
export default App;

 ``

index.js
```
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));

```
 LoadingHOC.js

```
import React, { useEffect, useState } from "react";
const LoadingHOC = () => {
const [appState, setAppState] = useState({ loading: false, lessons: null });
  useEffect(() => {
    console.log("debug app state");
    setAppState({ loading: true });
    const apiUrl = "http://127.0.0.1:8000/api/";
    fetch(apiUrl)
      .then((data) => data.json())

      .then((lessons) => {
        setAppState({ loading: false, lessons: lessons });
        console.log(lessons);
      });
  }, []);
return (
    <p style={{ fontSize: "25px" }}>We are waiting for the data to load!...</p>
  );
};
export default LoadingHOC;

```
Lessons.js
```
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import UpdateLesson from "./UpdateLesson";
import DeleteLesson from "./DeleteLesson";
import Container from "@material-ui/core/Container";
import Typography from "@material-ui/core/Typography";
import IconButton from "@material-ui/core/IconButton";
import EditIcon from "@material-ui/icons/Edit";
import Link from "@material-ui/core/Link";

const useStyles = makeStyles({
  table: {
    minWidth: "450",
  },

  title: {
    textAlign: "center",
  },

  tablerow: {
    fontWeight: "bold",
  },
});

const Lessons = (props) => {
  const { lessons } = props;
  const classes = useStyles();
  if (lessons === null) {
    return <div>No data</div>;
  }
  return (
    <React.Fragment>
      <Container>
        <Paper>
          <TableContainer component={Paper}>
            <Table className={classes?.table} aria-label="simple table">
              <TableHead>
                <TableRow>
                  <TableCell className={classes.tablerow}>Id</TableCell>
                  <TableCell align="right" className={classes.tablerow}>
                    Student
                  </TableCell>
                  <TableCell align="right" className={classes.tablerow}>
                    Title
                  </TableCell>
                  <TableCell align="right" className={classes.tablerow}>
                    lesson date
                  </TableCell>
                  <TableCell align="right" className={classes.tablerow}>
                    payment
                  </TableCell>
                  <TableCell
                    align="right"
                    className={classes.tablerow}
                  ></TableCell>
                  <TableCell
                    align="right"
                    className={classes.tablerow}
                  ></TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {lessons.map((lesson) => (
                  <TableRow key={lesson.id}>
                    <TableCell component="th">{lesson.id}</TableCell>
                    <TableCell align="right">{lesson.student}</TableCell>
                    <TableCell align="right">{lesson.title}</TableCell>
                    <TableCell align="right">{lesson.lesson_date}</TableCell>
                    <TableCell align="right">{lesson.paid}</TableCell>
                    <TableCell align="center">
                      {/* <UpdateLesson lesson={lesson.id} /> */}
                      <Link href={"/" + lesson.id}>
                      <IconButton className={classes.icon}>
                      <EditIcon />
                      </IconButton>
                        </Link>
                    </TableCell>
                    <TableCell align="right">
                      <DeleteLesson lessonId={lesson.id} />
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </TableContainer>
        </Paper>
      </Container>
    </React.Fragment>
  );
};

export default Lessons;

```

我的目标是能够将路由传递给应用程序，以便通过道具能够根据 url 页面 chab=nge 我的页脚按钮。谢谢大家。

标签： reactjs