Реактивный маршрутизатор реализует navlink с использованием Material UI

Question

Я новичок, чтобы реагировать, и я использую UI Material для дизайна моего приложения, которое разделено на 3 части: Nav, Header и Content. В навигационной системе я помещаю ссылки, проблема в том, что я хочу щелкнуть по ссылке, информация отображается в Контенте, а не в Наве. Как я могу сделать так, чтобы информация отображалась в Контенте, а не в Навигации?

Макет

Новый пользователь

Nav:

      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>
      );
    }

Answer 1

Содержимое, которое вы хотите отобразить при изменении маршрута, должно быть в теге <Content></Content>. Таким образом, ваш код должен быть

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

Answer 2

Ваш <Switch></Switch> находится не в том месте. Должно быть в <Content></Content>, а не в <Nav></Nav>