reactjs - 带有 React Router 的 Reactjs Material-UI 菜单

Question

试图在我的应用程序中有一个路由到不同页面的菜单，并且无法获取路由。当我在导航栏中包含我的 Routes 函数时，我收到一个无限循环错误和页面终止。

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import About from '../views/About'
import Search from '../views/Search';
import Home from '../views/Home'
import { Menu, MenuItem } from '@material-ui/core';

function Routes() {
    const [anchorEl, setAnchorEl] = React.useState(null);

    
      const handleClose = () => {
        setAnchorEl(null);
      };
    return (
        <div>
            <Router>
            <Menu
            id="simple-menu"
            anchorEl={anchorEl}
            keepMounted
            open={Boolean(anchorEl)}
            onClose={handleClose}
          >
                <MenuItem button component={Link} to={'/about'}>
                    About
                </MenuItem>
                <MenuItem button component={Link} to={'/search'}>
                    Search Pricing
                </MenuItem>
                
            </Menu>
                <Switch>
                    <Route exact path="/" component={Home} />
                    <Route path="/about" component={About} />
                    <Route path="/search" component={Search} />
                </Switch>
            </Router>
        </div>
    );
}

export default Routes;

另外作为其他参考，我将这个 Routes 函数包含在我的导航栏中。这是我包含它的代码：

return (
    <div className={classes.root} id="header">
      <AppBar className={classes.appbar} elevation={0}>
        <Toolbar className={classes.appbarWrapper}>
          <h1 className={classes.appbarTitle}>
            H<span className={classes.colorText}>P</span>H
          </h1>
          <IconButton onClick={handleClick}>
            <SortIcon className={classes.icon} />
          </IconButton>
          **<Routes />**
        </Toolbar>
      </AppBar>

      <Collapse
        in={checked}
        {...(checked ? { timeout: 1000 } : {})}
        collapsedHeight={50}
      >
        <div className={classes.container}>
          <h1 className={classes.title}>
            Hospital <span className={classes.colorText}>Price</span> Hub
          </h1>
          <Scroll to="place-to-visit" smooth={true}>
            <IconButton>
              <ExpandMoreIcon className={classes.goDown} />
            </IconButton>
          </Scroll>
        </div>
      </Collapse>
    </div>
  );

如果我以正确的方式处理此问题，请告诉我。

标签： reactjsmenumaterial-ui