Material UI Link Menu 页面中的 Mini Drawer 显示为新页面答案

【问题标题】：Mini Drawer from Material UI Link Menu page displays as new pageMaterial UI Link Menu 页面中的 Mini Drawer 显示为新页面
【发布时间】：2020-04-22 16:00:35
【问题描述】：

我正在做一个更新库存的项目，并且正在使用材料 ui。我使用 Material ui 中的迷你抽屉，当我单击菜单链接时，它会路由到新页面，而不是在主页本身中呈现。

App.JS 是我制作路线的地方

import MiniDrawer from './HomePage'
import GetData from './GetData'
import Wrapper from './Wrapper'
import { Route, Switch, BrowserRouter as Router } from 'react-router-dom'
function App() {
return (
<div className="App">
<Router>
<Switch>
<Route path='/' exact component={MiniDrawer}/>
<Route path='/GetData' component={GetData}/>
<Route path='/Wrapper' component={Wrapper}/>
</Switch>
</Router>
{/* <MiniDrawer/> */}
</div>
);
}
export default App;

HomePage.js 看一下 Link 属性，当我单击链接时，它会打开新页面，而不是显示在主页中这是我们传递链接以制作路线的地方，当我单击此处时，它会重定向到新页面，以在主页本身中显示组件从数据库获取详细信息的 GetData 代码

<List>
<ListItem button component={Link} to="/GetData">
<ListItemIcon>
<InboxIcon />
</ListItemIcon>
<ListItemText primary="GetData" />

产品输入的包装代码

[![</ListItem>
<ListItem button component={Link} to="/Wrapper">
<ListItemIcon>
<MailIcon />
</ListItemIcon>
<ListItemText primary="Drafts" />
</ListItem>
</List>
<main className={classes.content} style={{height:"100vh"}}>
<div className={classes.toolbar} />
{/* <Wrapper/> */}
</main>
</div>
);
}][1]][1]

任何帮助将不胜感激

沙盒链接https://codesandbox.io/s/great-tdd-or04i?fontsize=14&hidenavigation=1&theme=dark

【问题讨论】：

您能否在沙箱中提供源代码以更清晰。
沙盒代码，我需要将测试内容显示在MiniDrawer而不是单独的页面中，可以吗？ codesandbox.io/s/…

标签： javascript reactjs react-router material-ui

【解决方案1】：

现在，我找到了 WorkAround，而不是将所有页面路由到 index.js。我只是将需要渲染的页面路由到主布局页面

Here is the sandbox Link

【讨论】：