Question

我是新来的反应者，我使用UI Material来设计应用程序，该应用程序分为Nav，Header和Content三个部分。在导航栏中，我放置了链接，问题是我想单击链接，该信息显示在“内容”而不是“导航”中如何使信息显示在内容而不是导航中？

导航：

      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

您的<Switch></Switch>放在错误的位置。它应该在<Content></Content>中，而不应该在<Nav></Nav>

中

Answer 2

要更改路线时要显示的内容必须在<Content></Content>标记中。所以你的代码应该是

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

React Router使用Material UI实施navlink

2 个答案: