next.js 点击返回上一页后，使用react router出错

64jmpszr  于 2023-10-18  发布在  React
关注(0)|答案(1)|浏览(126)

我在React中设计用户 Jmeter 板并制作侧边栏。当进入约会页面并深入到另一个页面时，如（约会>表单约会页面），我试图从表单页面返回约会页面时出错。这样的错误：
error
路由器

import { useState } from "react";
import { Routes, Route, BrowserRouter } from "react-router-dom";
import Topbar from "@/components/Topbar";
import Sidebar from "@/components/Sidebar";
import { CssBaseline, ThemeProvider } from "@mui/material";
import { ColorModeContext, useMode } from "@/app/theme";
import Appointment from "./appointment/page";
import Dashboard from "./dashboard/page";
import DataPasien from "./DataPasien/page";
import DataTerapis from "./DataTerapis/page";
import Transaksi from "./Transaksi/page";
import Calendar from "./calendar/page";
import FormAppointment from "./appointment/FormAppointment/page";

function Home() {
  const [theme, colorMode] = useMode();
  const [isSidebar, setIsSidebar] = useState(true);

  return (
    <BrowserRouter>
      <ColorModeContext.Provider value={colorMode}>
        <ThemeProvider theme={theme}>
          <CssBaseline />
          <div className="app">
            <Sidebar isSidebar={isSidebar} />
            <main className="content">
              <Topbar setIsSidebar={setIsSidebar} />
              <Routes>
                <Route path="/" Component={Dashboard} />
                <Route path="/appointment" Component={Appointment} />
                <Route
                  path="/appointment/formappointment"
                  Component={FormAppointment}
                />
                <Route path="/DataPasien" Component={DataPasien} />
                <Route path="/DataTerapis" Component={DataTerapis} />
                <Route path="/Transaksi" Component={Transaksi} />
                <Route path="/calendar" Component={Calendar} />
                <Route path="/FormTransaksi" />
                <Route path="/FormTerapis" />

              </Routes>
            </main>
          </div>
        </ThemeProvider>
      </ColorModeContext.Provider>
    </BrowserRouter>
  );
}

export default Home;

边栏

import { useState } from "react";
import { ProSidebar, Menu, MenuItem } from "react-pro-sidebar";
import { Box, IconButton, Typography, useTheme } from "@mui/material";
import { Link } from "react-router-dom";
import "react-pro-sidebar/dist/css/styles.css";
import { tokens } from "@/app/theme";
import HomeOutlinedIcon from "@mui/icons-material/HomeOutlined";
import CalendarTodayOutlinedIcon from "@mui/icons-material/CalendarTodayOutlined";
import MenuOutlinedIcon from "@mui/icons-material/MenuOutlined";
import EditCalendarOutlinedIcon from '@mui/icons-material/EditCalendarOutlined';
import CompareArrowsOutlinedIcon from '@mui/icons-material/CompareArrowsOutlined';
import TransferWithinAStationOutlinedIcon from '@mui/icons-material/TransferWithinAStationOutlined';
import PersonSearchOutlinedIcon from '@mui/icons-material/PersonSearchOutlined';

const Item = ({ title, to, icon, selected, setSelected }) => {
  const theme = useTheme();
  const colors = tokens(theme.palette.mode);
  return (
    <MenuItem
      active={selected === title}
      style={{
        color: colors.grey[100],
      }}
      onClick={() => setSelected(title)}
      icon={icon}
    >
      <Typography>{title}</Typography>
      <Link to={to} />
    </MenuItem>
  );
};

const Sidebar = () => {
  const theme = useTheme();
  const colors = tokens(theme.palette.mode);
  const [isCollapsed, setIsCollapsed] = useState(false);
  const [selected, setSelected] = useState("Dashboard");

  return (
    <Box
      sx={{
        "& .pro-sidebar-inner": {
          background: `${colors.primary[400]} !important`,
        },
        "& .pro-icon-wrapper": {
          backgroundColor: "transparent !important",
        },
        "& .pro-inner-item": {
          padding: "5px 35px 5px 20px !important",
        },
        "& .pro-inner-item:hover": {
          color: `${colors.primary[500]} !important`,
          
        },
        "& .pro-menu-item.active": {
          color: `${colors.primary[600]} !important`,
          backgroundColor: `${colors.primary[700]} !important`,
          borderRadius: "10px",
        },
      }}
    >
      <ProSidebar collapsed={isCollapsed}>
        <Menu iconShape="square">
          {/* LOGO AND MENU ICON */}
          <MenuItem
            onClick={() => setIsCollapsed(!isCollapsed)}
            icon={isCollapsed ? <MenuOutlinedIcon /> : undefined}
            style={{
              margin: "10px 0 20px 0",
              color: colors.grey[100],
            }}
          >
            {!isCollapsed && (
              <Box
                display="flex"
                justifyContent="space-between"
                alignItems="center"
                ml="40px"
              >
                <Typography variant="h3" color={colors.grey[100]} fontWeight="bold">
                  KlinikQ
                </Typography>
                <IconButton onClick={() => setIsCollapsed(!isCollapsed)}>
                  <MenuOutlinedIcon />
                </IconButton>
              </Box>
            )}
          </MenuItem>

          <Box paddingLeft={isCollapsed ? undefined : "10%"}>
            <Item
              title="Dashboard"
              to="/"
              icon={<HomeOutlinedIcon />}
              selected={selected}
              setSelected={setSelected}
            />

            <Typography
              variant="h6"
              color={colors.grey[300]}
              sx={{ m: "15px 0 5px 20px" }}
            >
              Data
            </Typography>
            <Item
              title="Appointment"
              to="/appointment"
              icon={<EditCalendarOutlinedIcon />}
              selected={selected}
              setSelected={setSelected}
            />
            <Item
              title="Transaksi"
              to="/transaksi"
              icon={<CompareArrowsOutlinedIcon />}
              selected={selected}
              setSelected={setSelected}
            />
            <Item
              title="Data Terapis"
              to="/dataterapis"
              icon={<PersonSearchOutlinedIcon />}
              selected={selected}
              setSelected={setSelected}
            />
                        <Item
              title="Data Pasien"
              to="/datapasien"
              icon={<TransferWithinAStationOutlinedIcon />}
              selected={selected}
              setSelected={setSelected}
            />

            <Typography
              variant="h6"
              color={colors.grey[300]}
              sx={{ m: "15px 0 5px 20px" }}
            >
              Calendar
            </Typography>

            <Item
              title="Calendar"
              to="/calendar"
              icon={<CalendarTodayOutlinedIcon />}
              selected={selected}
              setSelected={setSelected}
            />
          </Box>
        </Menu>
      </ProSidebar>
    </Box>
  );
};

export default Sidebar;

预约页面

import React from 'react';
import { Box, Button, useTheme } from '@mui/material';
import { tokens } from '../theme';
import AddOutlinedIcon from '@mui/icons-material/AddOutlined';
import Header from '@/components/Header';
import TableAppointment from '@/components/TableAppointment';
import { useNavigate } from 'react-router-dom';

function Appointment() {
  const theme = useTheme();
  const colors = tokens(theme.palette.mode);

  let navigate = useNavigate();
  return (
    <Box m="20px">
      <Header title="Appointment" />

      <Box>
        <Button onClick={()=> {navigate("/appointment/formappointment")}}
        style={{
          backgroundColor: colors.blueAccent[700],
        }}
          sx={{
            color: colors.grey[100],
            fontSize: "14px",
            fontWeight: "bold",
            padding: "10px 20px",
          }}
        >
          <AddOutlinedIcon sx={{ mr: "10px" }} />
          Tambah Data
        </Button>
      </Box>

      <TableAppointment />
    </Box>
  )
}

export default Appointment

表格预约

import React, { useState } from "react";
import {
  Box,
  Button,
  TextField,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
  Grid,
  TablePagination,
  useTheme,
} from "@mui/material";
import { nanoid } from "nanoid";
import { Fragment } from "react";
import Header from "@/components/Header";
import ReadOnlyRowAppointment from "@/components/ReadOnlyRowAppointment";
import EditableRowAppointment from "@/components/EditableRowAppointment";
import { tokens } from "@/app/theme";

function createData(id ,name, noTelp, order, terapis, tanggal) {
    return {id, name, noTelp, order, terapis, tanggal };
  }
  
  const dataTerapis = [
    createData(1,'rudi', '085727263498', 'pijat','basuki','24-02-2023',),
    createData(2,'hadi', '085465986325', 'pijat','reni','24-02-2023',),
    createData(3,'suwarno', '085727263498', 'pijat','basuki','24-02-2023',),
    createData(4,'galang', '085727263498', 'pijat','basuki','24-02-2023',),
    createData(5,'velop', '085727263498', 'pijat','basuki','24-02-2023',),
    createData(6,'gulio', '085465986325', 'pijat','reni','24-02-2023',),
    createData(7,'rara', '085727263498', 'pijat','basuki','24-02-2023',),
    createData(8,'gerio', '085465986325', 'pijat','basuki','24-02-2023',),
    createData(9,'rudi', '085727263498', 'pijat','basuki','24-02-2023',),
    createData(10,'hadi', '085465986325', 'pijat','reni','24-02-2023',),
    createData(11,'suwarno', '085727263498', 'pijat','basuki','24-02-2023',),
    createData(12,'galang', '085727263498', 'pijat','basuki','24-02-2023',),
    createData(13,'velop', '085727263498', 'pijat','basuki','24-02-2023',),
    createData(14,'gulio', '085465986325', 'pijat','reni','24-02-2023',),
    createData(15,'rara', '085727263498', 'pijat','basuki','24-02-2023',),
    createData(16,'gerio', '085465986325', 'pijat','basuki','24-02-2023',),
  ];

function FormAppointment() {
  const theme = useTheme();
  const colors = tokens(theme.palette.mode);

  const [pasiens, setPasiens] = useState(dataTerapis);
  const [addFormData, setaddFormData] = useState({
    name: "",
    noTelp: "",
    order: "",
    terapis: "",
    tanggal: "",
  });

  const [editFormData, setEditFormData] = useState({
    name: "",
    noTelp: "",
    order: "",
    terapis: "",
    tanggal: "",
  });

  const [editPasienId, setEditPasienId] = useState(null);

  const handleAddFormChange = (e) => {
    e.preventDefault();

    const fieldName = e.target.getAttribute("name");
    const fieldValue = e.target.value;

    const newFormData = { ...addFormData };
    newFormData[fieldName] = fieldValue;

    setaddFormData(newFormData);
  };

  const handleEditFormChange = (e) => {
    e.preventDefault();

    const fieldName = e.target.getAttribute("name");
    const fieldValue = e.target.value;

    const newFormData = { ...editFormData };
    newFormData[fieldName] = fieldValue;

    setEditFormData(newFormData);
  };

  const handleAddFormSubmit = (e) => {
    e.preventDefault();

    const newPasien = {
      id: nanoid(),
      name: addFormData.name,
      noTelp: addFormData.noTelp,
      order: addFormData.order,
      terapis: addFormData.terapis,
      tanggal: addFormData.tanggal,
    };

    const newPasiens = [...pasiens, newPasien];
    setPasiens(newPasiens);
  };

  const handleEditFormSubmit = (e) => {
    e.preventDefault();

    const editedPasien = {
      id: editPasienId,
      name: editFormData.name,
      noTelp: editFormData.noTelp,
      order: editFormData.order,
      terapis: editFormData.terapis,
      tanggal: editFormData.tanggal,
    };

    const newPasiens = [...pasiens];

    const index = pasiens.findIndex((pasien) => pasien.id === editPasienId);

    newPasiens[index] = editedPasien;

    setPasiens(newPasiens);
    setEditPasienId(null);
  };

  const handleEditClick = (e, pasien) => {
    e.preventDefault();
    setEditPasienId(pasien.id);

    const formValues = {
      name: pasien.name,
      noTelp: pasien.noTelp,
      order: pasien.order,
      terapis: pasien.terapis,
      tanggal: pasien.tanggal,
    };

    setEditFormData(formValues);
  };

  const handleCancelClick = () => {
    setEditPasienId(null);
  };

  const handleDeleteClick = (pasienId) => {
    const newPasiens = [...pasiens];

    const index = pasiens.findIndex((pasien) => pasien.id === pasienId);

    newPasiens.splice(index, 1);

    setPasiens(newPasiens);
  };

  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(10);

  const handleChangePage = (event, newPage) => {
    setPage(newPage);
  };

  const handleChangeRowsPerPage = (event) => {
    setRowsPerPage(+event.target.value);
    setPage(0);
  };

  return (
    <Box m="20px">
      <Header title="Tambah Appointment" />

      <Box
        onSubmit={handleAddFormSubmit}
        component="form"
        sx={{
          "& .MuiTextField-root": { m: 1, width: "35ch" },
        }}
      >
        <Grid container spacing={2} maxWidth={1000}>
          <Grid item xs>
            <TextField
              name="name"
              label="Nama"
              type="text"
              required
              onChange={handleAddFormChange}
            />
          </Grid>
          <Grid item xs>
            <TextField
              name="noTelp"
              label="No"
              type="number"
              required
              onChange={handleAddFormChange}
            />
          </Grid>
          <Grid item xs>
            <TextField
              name="order"
              label="order"
              type="text"
              required
              onChange={handleAddFormChange}
            />
          </Grid>
          <Grid item xs>
            <TextField
              name="terapis"
              label="terapis"
              type="text"
              required
              onChange={handleAddFormChange}
            />
          </Grid>
          <Grid item xs>
            <TextField
              name="tanggal"
              type="date"
              required
              onChange={handleAddFormChange}
            />
          </Grid>
          <Grid item xs>
            <Box>
            <Button
                type="submit"
                variant="contained"
                size="large"
                color="info"
                style={{ marginTop: 12, marginLeft: 5 }}
                sx={{fontWeight: "bold"}}
              >
                Tambah
              </Button>
            </Box>
          </Grid>
        </Grid>
      </Box>
      <Box className="data-pasien-table" marginRight={"2rem"}>
        <form onSubmit={handleEditFormSubmit}>
          <Paper sx={{overflow: 'hidden', width: '100%', maxHeight: 600 }}>
          <TableContainer component={Paper} sx={{maxHeight: 600 }}>
            <Table sx={{ minWidth: 650 }} aria-label="simple table">
              <TableHead>
                <TableRow>
                  <TableCell
                    align="center"
                    sx={{ fontSize: "1rem", fontWeight: "bold" }}
                    style={{backgroundColor: colors.primary[400] }}
                  >
                    Nama
                  </TableCell>
                  <TableCell
                    align="center"
                    sx={{ fontSize: "1rem", fontWeight: "bold" }}
                    style={{backgroundColor: colors.primary[400] }}
                  >
                    No.Telp
                  </TableCell>
                  <TableCell
                    align="center"
                    sx={{ fontSize: "1rem", fontWeight: "bold" }}
                    style={{backgroundColor: colors.primary[400] }}
                  >
                    Order
                  </TableCell>
                  <TableCell
                    align="center"
                    sx={{ fontSize: "1rem", fontWeight: "bold" }}
                    style={{backgroundColor: colors.primary[400] }}
                  >
                    Terapis
                  </TableCell>
                  <TableCell
                    align="center"
                    sx={{ fontSize: "1rem", fontWeight: "bold" }}
                    style={{backgroundColor: colors.primary[400] }}
                  >
                    Tanggal
                  </TableCell>
                  <TableCell
                    align="center"
                    sx={{ fontSize: "1rem", fontWeight: "bold"}}
                    style={{backgroundColor: colors.primary[400] }}
                  >
                    Actions
                  </TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {pasiens
                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                .map((pasien) => (
                  <Fragment>
                    {editPasienId === pasien.id ? (
                      <EditableRowAppointment
                        editFormData={editFormData}
                        handleEditFormChange={handleEditFormChange}
                        handleCancelClick={handleCancelClick}
                      />
                    ) : (
                      <ReadOnlyRowAppointment
                        pasiens={pasiens}
                        pasien={pasien}
                        handleEditClick={handleEditClick}
                        handleDeleteClick={handleDeleteClick}
                      />
                    )}
                  </Fragment>
                ))}
              </TableBody>
            </Table>
          </TableContainer>
          </Paper>
          <TablePagination
            rowsPerPageOptions={[5, 10, 20]}
            component="div"
            count={pasiens.length}
            rowsPerPage={rowsPerPage}
            page={page}
            onPageChange={handleChangePage}
            onRowsPerPageChange={handleChangeRowsPerPage}
          ></TablePagination>
        </form>
      </Box>
    </Box>
  );
}

export default FormAppointment;
next.js

1条答案

按热度按时间
wh6knrhe

wh6knrhe1#

错误消息表示您试图在<Router>组件之外使用useNavigate函数。在Next.js中，你应该使用useRouter钩子来访问路由相关的功能。以下是解决此问题的方法：
1.从'next/router'导入useRouter：

import { useRouter } from 'next/router';

1.将useNavigate的用法替换为useRouter：

// Replace this line
let navigate = useNavigate();

// With this line
const router = useRouter();
赞(0）分享  回复(0）举报  2023-10-18
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com