Javascript 如何在物料UI抽屉中使用React浏览器路由器

我试图弄清楚如何在react中使用浏览器路由器来填充材质UI抽屉的内容部分

代码用于使菜单选项链接到抽屉内容部分中显示的组件，但是，当页面刷新时，会出现问题，因为抽屉内容中呈现的组件没有顶级路由。具有抽屉的实际页面（即顶层路由）应在页面刷新时重新加载，但重新加载的url中的地址正在尝试使用内容组件

我的代码是：

   import React, {  useState, useEffect } from 'react';
import { Switch, Route, Link, BrowserRouter, useParams,
    useRouteMatch } from "react-router-dom";
import { makeStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import AppBar from '@material-ui/core/AppBar';
import CssBaseline from '@material-ui/core/CssBaseline';
import Toolbar from '@material-ui/core/Toolbar';
import List from '@material-ui/core/List';
import Typography from '@material-ui/core/Typography';
import Divider from '@material-ui/core/Divider';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import theme from "../../../services/appearance/theme";
import { MuiThemeProvider } from '@material-ui/core/styles';


import Menu1 from "../../menu/First";
import Menu2 from "../../menu/Second";



const drawerWidth = 240;

const useStyles = makeStyles((theme) => ({
  root: {
    display: 'flex',
  },
  appBar: {
    zIndex: theme.zIndex.drawer + 1,
  },
  drawer: {
    width: drawerWidth,
    flexShrink: 0,
  },
  drawerPaper: {
    width: drawerWidth,
  },
  drawerContainer: {
    overflow: 'auto',
  },
  content: {
    flexGrow: 1,
    padding: theme.spacing(3),
    maxWidth: `calc(100vw - ${drawerWidth}px)`
  },
}));

export default function ClippedDrawer() {
  const classes = useStyles();
  let { path, url } = useRouteMatch();
  let { topicId } = useParams();



  return (
    <div className={classes.root}>
    <MuiThemeProvider theme={theme}>
      <CssBaseline />
      <AppBar position="fixed" className={classes.appBar}>
       test
      </AppBar>
     <BrowserRouter>
      <Drawer
        className={classes.drawer}
        variant="permanent"
        classes={{
          paper: classes.drawerPaper,
        }}
      >
        <Toolbar />
        <div className={classes.drawerContainer}>
        <List>
            
        <ListItem button key="1" component={Link}  to={`${url}/Menu1`}
        >
            <ListItemText primary="First Menu"></ListItemText> 
        </ListItem>
        <ListItem button key="2" component={Link} to={`${url}/Menu2`}>
            <ListItemText>Second Menu</ListItemText> 
        </ListItem>
        
    </List>
        </div>
      </Drawer>
      <main className={classes.content}>
        <Toolbar>test</Toolbar> 

        <Switch>
            <Route path={`${path}/:Menu1`}>
            <Menu1 />
            </Route>
            <Route path={`${path}/:Menu2`}>
            <Menu2 />
            </Route>
        </Switch>    
        
        
        
      </main>
      </BrowserRouter>
    </MuiThemeProvider>  
    </div>
  );
}

import React，{useState，useffect}来自“React”；
导入{交换机、路由、链路、浏览器路由器、useParams、，
“react router dom”中的useRouteMatch}；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/Drawer”导入抽屉；
从“@material ui/core/AppBar”导入AppBar；
从“@material ui/core/CssBaseline”导入CssBaseline；
从“@material ui/core/Toolbar”导入工具栏；
从“@material ui/core/List”导入列表；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/Divider”导入分隔器；
从“@material ui/core/ListItem”导入ListItem；
从“@material ui/core/ListItemIcon”导入ListItemIcon；
从“@material ui/core/ListItemText”导入ListItemText；
从“../../../services/appearance/theme”导入主题；
从'@material ui/core/styles'导入{MuiThemeProvider}；
从“../../menu/First”导入菜单1；
从“../../menu/Second”导入菜单2；
常数抽屉宽度=240；
const useStyles=makeStyles（（主题）=>({
根目录：{
显示：“flex”，
},
appBar：{
zIndex:theme.zIndex.drawer+1，
},
出票人：{
宽度：抽屉宽度，
flexShrink:0，
},
抽屉纸：{
宽度：抽屉宽度，
},
付款人：{
溢出：“自动”，
},
内容：{
flexGrow:1，
填充：主题。间距（3），
maxWidth:`calc（100vw-${drawerWidth}px）`
},
}));
导出默认函数ClippedDrawer（）{
const classes=useStyles（）；
让{path，url}=useRouteMatch（）；
设{topicId}=useParams（）；
返回(
)

在该页面中，是一个材质UI抽屉，该抽屉具有一个菜单，该菜单带有指向在该索引页面的内容中呈现的组件的链接

当我第一次加载页面时，我得到localhost:3000/index。我单击该页面上的Menu1菜单项，url地址更改为：localhost3000/Home/Menu1（并显示材质UI抽屉的内容窗口，其中包含Menu1组件-全部正确）。我可以刷新该页面，url地址保持正确

但是，当我单击菜单栏中的Menu2时，url地址将更改为Home/Menu2，但内容窗口中仍然填充着Menu1组件。它应该显示Menu2

如何调整文档中的嵌套路由示例以与材质UI抽屉一起使用？
您必须使用App.js中的浏览器路由器。因此，它不会为您提供空白页。如下所示：

 <BrowserRouter>
 <MarerialUIDrawer/>
  <Switch>
    <Route exact path='/' render=
        {props => <Home {...props} /> }/>
    <Route exact path='/about' render=
        {props => <About {...props} /> }/>
    <Route exact path='/contact' render=
        {props => <Contact {...props} /> }/>
  </Switch>
</BrowserRouter>


}/>
}/>
}/>

导出默认应用程序
 我想我找到了

我在路径中不需要冒号

这：

应该是：


您是否看到有关嵌套路由器的文档？嗨-不，你误解了。我确实使用App.js中的浏览器路由器（它覆盖了应用程序中的主要页面）。但是，要切换物料UI抽屉的内容（与抽屉菜单中的项目相对应），有一个不同的问题。谢谢你的努力。