Reactjs 反应路由器：组件未呈现，但URL更改

我是新手。 我正在实现抽屉（MaterialUI），所以当用户点击左菜单（LeftMenu.jsx）时；相应的组件应该在中心进行渲染（即MainContent.jsx）

不幸的是，我遇到以下错误：

错误：不变量失败：您不应在外部使用

但若我在LeftMenu.jsx中包含了链接，那个么URL会发生变化，但视图不会得到渲染

我尝试了中给出的解决方案，但问题仍然没有解决

以下是组件列表：

Status.jsx

import React, { Component } from "react";
class Status extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return <div>Status</div>;
  }
}
export default Status;

import React，{Component}来自“React”；
类状态扩展组件{
建造师（道具）{
超级（道具）；
this.state={}；
}
render（）{
返回状态；
}
}
导出默认状态；

AdminPanelLayout.jsx

export default function AdminPanelLayout() {
  const classes = useStyles();
  const theme = useTheme();
  const [open, setOpen] = React.useState(false);

  const handleDrawerOpen = () => {
    if (open) {
      setOpen(false);
    } else {
      setOpen(true);
    }
  };

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

  return (
    <div className={classes.root}>
      <CssBaseline />
      <AppBar
        position="fixed"
        className={clsx(classes.appBar, {
          [classes.appBarShift]: open,
        })}
      >
        <Toolbar>
          <IconButton
            color="inherit"
            aria-label="open drawer"
            onClick={handleDrawerOpen}
            edge="start"
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" noWrap>
            Admin Panel
          </Typography>
        </Toolbar>
      </AppBar>
      <Drawer
        variant="permanent"
        className={clsx(classes.drawer, {
          [classes.drawerOpen]: open,
          [classes.drawerClose]: !open,
        })}
        classes={{
          paper: clsx({
            [classes.drawerOpen]: open,
            [classes.drawerClose]: !open,
          }),
        }}
      >
        <div className={classes.toolbar}></div>
        <Divider />
        <LeftMenu></LeftMenu>
      </Drawer>
      <MainContent></MainContent>
    </div>
  );
}

导出默认函数AdminPanelLayout（）{
const classes=useStyles（）；
const theme=useTheme（）；
const[open，setOpen]=React.useState（false）；
常量handleDrawerOpen=（）=>{
如果（打开）{
setOpen（假）；
}否则{
setOpen（真）；
}
};
常量handleDrawerClose=（）=>{
setOpen（假）；
};
返回(
管理面板
);
}

MainContent.jsx

export default function MainContent() {
  const classes = useStyles();
  return (
    <Router>
      <main className={classes.content}>
        <div className={classes.toolbar} />
        <Switch>
          <Route path="/Status" component={withRouter(Status)}>
            <Status />
          </Route>
          <Route path="/">
            <span>testing</span>
          </Route>
        </Switch>
      </main>
    </Router>
  );
}

导出默认函数MainContent（）{
const classes=useStyles（）；
返回(
测试
);
}

LeftMenu.jsx

export default function LeftMenu() {
  return (
    <div>
      <List>
        {["Status", "Starred", "Send email", "Drafts"].map((text, index) => (
          <ListItem button key={text} component={Link} to="/Status">
            <ListItemIcon>
              {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
            </ListItemIcon>
            <ListItemText primary={text} />
          </ListItem>
        ))}
      </List>
      <Divider />
      <List>
        {["All mail", "Trash", "Spam"].map((text, index) => (
          <ListItem button key={text}>
            <ListItemIcon>
              {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
            </ListItemIcon>
            <ListItemText primary={text} />
          </ListItem>
        ))}
      </List>
    </div>
  );
}

导出默认函数LeftMenu（）{
返回(
{[“状态”、“星号”、“发送电子邮件”、“草稿”].map（（文本、索引）=>(
{索引%2==0？：}
))}
{[“所有邮件”、“垃圾”、“垃圾邮件”].map（（文本、索引）=>(
{索引%2==0？：}
))}
);
}

App.js

import "./App.css";
import AdminPanelLayout from "./components/AdminPanelLayout";
import LeftMenu from "./components/LeftMenu";

function App() {
  return <AdminPanelLayout></AdminPanelLayout>;
}

export default App;

导入“/App.css”； 从“/components/AdminPanelLayout”导入AdminPanelLayout； 从“/components/LeftMenu”导入LeftMenu； 函数App（）{ 返回； } 导出默认应用程序； 您应该使用

<Route path="/Status" component={Status}>

或

另外，您不应该这样做

component={withRouter（Status）}

，因为这相当于

component={Status}

。使用路由器

的目的是获取未通过
路由
呈现的组件，以访问
路由道具
。由于
状态
已通过
路由
呈现，因此不需要使用
with router
包装它

-希望这有帮助
 我试过了，但不起作用。您是否用
路由器
包装了
AdminPanelLayout
。如何呈现AdminPanelLayout？编辑帖子以包含app.js代码。即使在使用路由器包装AdminPanelLayout之后。未呈现。请使用
路由器
包装AdminPanelLayout，并从MainContent中删除
路由器
。jsx编辑答案以添加代码沙盒链接。如果有帮助，请告诉我。
<Route path="/Status">
 <Status />
</Route>