React router 使用 Material UI 实现 navlink答案

【问题标题】：React router implement navlink using Material UIReact router 使用 Material UI 实现 navlink
【发布时间】：2020-02-06 06:26:22
【问题描述】：

我是新手，我使用 UI Material 来设计我的应用程序，该应用程序分为导航、标题和内容三个部分。在导航中，我放置了链接，问题是我想点击链接，信息显示在内容中而不是导航中如何使信息显示在内容中而不是导航中？

Layout

New user

导航：

      export default function NestedList() {
      const classes = useStyles();
      const [open, setOpen] = React.useState(true);

      const handleClick = () => {
        setOpen(!open);
      };
      return (
        <List
          component="nav"
          aria-labelledby="nested-list-subheader"
          subheader={
            <ListSubheader component="div" id="nested-list-subheader">
              Nested List Items
            </ListSubheader>
          }
          className={classes.root}
        >
          <ListItem button component={NavLink} to='/User/New'>
            <ListItemIcon>
              <accessibility/>
            </ListItemIcon>
            <ListItemText primary="New User" />
          </ListItem>
          <ListItem button>
            <ListItemIcon>
              <DraftsIcon />
            </ListItemIcon>
            <ListItemText primary="Drafts" />
          </ListItem>

            </List>
            );
          }

应用：

    return (
        <MuiThemeProvider theme={createMuiTheme()}>
          <Root config={presets.createCozyLayout()}>
            <CssBaseline/>
            <Header>
              <Typography>Header</Typography>
            </Header>
            <Router>
            <Nav>
                <NestedList/>  
                <Switch>
                  <Route exact path="/User/new" component ={NewUser}/>  
                </Switch>   
            </Nav>
            </Router>  
            <Content> 
                      Content
            </Content> 
          </Root>
        </MuiThemeProvider>
      );
    }

【问题讨论】：

路由器应该在内容中，而不是在导航中。

标签： reactjs react-router material-ui

【解决方案1】：

当你的路线改变时你想显示的内容必须在<Content></Content>标签中。所以你的代码应该是

<Content>
  <Switch>
  </Switch>
</Content>

【讨论】：

【解决方案2】：

您的<Switch></Switch> 放错地方了。它应该在<Content></Content> 而不是<Nav></Nav>

【讨论】：