如何在 Material UI Drawer 中使用 React Browser Router

Question

我试图弄清楚如何在反应中使用浏览器路由器来填充 Material UI Drawer 的内容部分。

该代码用于使菜单选项链接到显示在抽屉内容部分中的组件，但是，当页面刷新时，会出现问题，因为没有到内容中呈现的组件的顶级路由的抽屉。 具有抽屉的实际页面（即顶级路由）应该在页面刷新时重新加载，但是，重新加载的 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>
  );
}

有谁知道如何将浏览器路由器限制在这个特定页面中，所以它只填充抽屉的内容部分 - 而不是实际页面 url？

菜单页面位于“index.jsx”。 它是一个顶级路由（相当于嵌套文档中的 home/topics）。

在该页面中，是一个 Material UI Drawer，它有一个菜单，其中包含指向在该索引页面的内容中呈现的组件的链接。

当我第一次加载页面时，我得到了 localhost:3000/index。 我单击该页面上的 Menu1 菜单项，url 地址更改为：localhost3000/Home/Menu1（并显示带有 Menu1 组件的 Material UI Drawer 的内容 window - 全部正确）。 我可以刷新该页面并且 url 地址仍然正确。

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

如何调整文档中的嵌套路由示例以与 Material UI Drawer 一起使用？

Answer 1

您必须在 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>

导出默认应用程序；

Answer 2

我想我找到了。

我不需要 Route 路径中的冒号。

这：<Route path={ ${path}/:Menu1 }>

应该：

<路由路径={ ${path}/Menu1 }>