Material-UI ListItem 作为链接组件更改 URL 但不渲染组件

Question

这是我第一次在这里问问题，但我真的很难过。

我正在为我的学校项目网站编写导航栏。我在 Appbar 组件中使用 Material-UI 的 List 组件。我看到了两个问题：1）最初的 onClick 将导致路径路由到 '/' 和 2）第二个 onClick 将更改为正确的路由，但不会呈现所需的组件。如果有帮助，请在底部查看问题的 gif。

我已经为此工作了几天，但我不确定我错过了什么????

这是我的 List 组件代码： PageList.jsx

import React from "react";
import clsx from "clsx";
import { makeStyles } from "@material-ui/core/styles";
import useMediaQuery from "@material-ui/core/useMediaQuery";
import { List, ListItem, ListItemText, ListItemIcon } from "@material-ui/core";
import { PAGES, usePageStatus } from "constants/pages";

const PageItem = ({ page }) => {
  const classes = useStyles();
  const { label, route, icon } = usePageStatus(page);
  return (
    <ListItem button component={Link} to={route}>
      <ListItemIcon className={classes.icon}>{icon}</ListItemIcon>
      <ListItemText primary={label} />
    </ListItem>
  );
};

const PageList = () => {
  const classes = useStyles();
  const isMobile = useMediaQuery("(max-width: 600px)", {
    noSsr: true,
  });

  return (
    <List className={clsx(isMobile ? classes.mobileList : classes.list)}>
      {PAGES.map((page) => (
        <PageItem page={page} key={page} />
      ))}
    </List>
  );
};

export default PageList;

这是我使用 PageList 组件的代码：TopNav.jsx

import React, { useState } from "react";
import clsx from "clsx";
import { makeStyles } from "@material-ui/core/styles";
import useMediaQuery from "@material-ui/core/useMediaQuery";
import {
  AppBar,
  Toolbar,
  Typography,
  IconButton,
  Drawer,
} from "@material-ui/core";
import MenuIcon from "@material-ui/icons/Menu";
import ChevronRightIcon from "@material-ui/icons/ChevronRight";
import PageList from "./PageList";
import MobileTopMenu from './MobileTopMenu'

const TopNav = () => {
  const classes = useStyles();
  const isMobile = useMediaQuery("(max-width: 600px)", {
    noSsr: true,
  });

  return (
    <AppBar position="static" elevation={0} className={classes.appBar}>
      <Toolbar>
        <Typography component="a" href="/" className={classes.title}>
          Amber+
        </Typography>
        {isMobile ? <MobileTopMenu /> : <PageList />}
      </Toolbar>
    </AppBar>
  );
};

这是我放置导航栏和路由代码的位置：routes.js

import React from "react";
import { Route, Router, Redirect, Switch } from "react-router-dom";
import { createBrowserHistory } from "history";
import { Home, Missing, Found, Search } from "pages";
import { PAGE_ROUTES, HOME, MISSING, FOUND, SEARCH } from "constants/pages";
import TopNav from "components/common/Nav/TopNav";

const history = createBrowserHistory();

const Routes = () => {
  return (
    <Router history={history}>
      <TopNav />
      <Switch>
        <Route exact path={PAGE_ROUTES[HOME]} component={Home} />
        <Route exact path={PAGE_ROUTES[MISSING]} component={Missing} />
        <Route exact path={PAGE_ROUTES[FOUND]} component={Found} />
        <Route exact path={PAGE_ROUTES[SEARCH]} component={Search} />
        <Route path="*">
          <Redirect to={PAGE_ROUTES[HOME]} component={Home} />
        </Route>
      </Switch>
    </Router>
  );
};

这是我的页面常量代码：pages.js

export const HOME = "Home";
export const MISSING = "Missing";
export const FOUND = "Found";
export const SEARCH = "Search";

export const PAGES = [HOME, MISSING, FOUND, SEARCH];

export const PAGE_ROUTES = {
  [HOME]: "/",
  [MISSING]: "/missing",
  [FOUND]: "/found",
  [SEARCH]: "/search",
};

export const PAGE_ICONS = {
  [HOME]: <HomeOutlinedIcon fontSize="small" />,
  [MISSING]: <FavoriteBorderIcon fontSize="small" />,
  [FOUND]: <ErrorOutlineIcon fontSize="small" />,
  [SEARCH]: <SearchIcon fontSize="small" />,
};

export const usePageStatus = (page) => {
  const route = PAGE_ROUTES[page];
  const icon = PAGE_ICONS[page];
  const label = page;

  return { route, icon, label };
};

这是我所看到的 GIF：

Answer 1

在PageList.jsx上试试这个

import React, {useCallback} from "react";
    import clsx from "clsx";
    import { makeStyles } from "@material-ui/core/styles";
    import useMediaQuery from "@material-ui/core/useMediaQuery";
    import { List, ListItem, ListItemText, ListItemIcon } from "@material-ui/core";
    import { PAGES, usePageStatus } from "constants/pages";
    import { useHistory } from "react-router-dom";
    
    const PageItem = ({ page }) => {
      const classes = useStyles();
      const { label, route, icon } = usePageStatus(page);
      const history = useHistory();
      const goto = useCallback((path) => history.push(path), [history]);
      return (
        <ListItem button onClick={() => goto(route)}>
          <ListItemIcon className={classes.icon}>{icon}</ListItemIcon>
          <ListItemText primary={label} />
        </ListItem>
      );
    };
    
    const PageList = () => {
      const classes = useStyles();
      const isMobile = useMediaQuery("(max-width: 600px)", {
        noSsr: true,
      });
    
      return (
        <List className={clsx(isMobile ? classes.mobileList : classes.list)}>
          {PAGES.map((page) => (
            <PageItem page={page} key={page} />
          ))}
        </List>
      );