Question

您好，我有一个带有工具栏和按钮的应用程序栏，在该菜单栏上可以添加我的菜单，以调用在我的路线中设置的路线

<Route path="/xd" component={About} exact={true}

这是我的路径：

export default function Navigation() { const classes = useStyles(); return ( <AppBar position="static" className={classes.appBar} > <Container maxWidth="lg"> <Toolbar > <Link to="/xd"> <Button className={classes.button} variant="raised" disableFocusRipple="false" disableRipple="false" centerRipple="false" color="secondary"> Home </Button> </Link> <Button className={classes.button} variant="raised" disableFocusRipple="false" disableRipple="false" centerRipple="false" color="secondary"> Home </Button> <Button className={classes.button} variant="raised" disableFocusRipple="false" disableRipple="false" centerRipple="false" color="secondary"> Home </Button> <Button className={classes.button} variant="raised" disableFocusRipple="false" disableRipple="false" centerRipple="false" color="secondary"> Home </Button> </Toolbar> </Container> </AppBar> ); } />

这是我的导航栏：

finish

当我单击按钮之一时，我只想更新内容容器我不知道我做得是否正确

Answer 1

您的navbar和header与您的switch语句相邻，因此您肯定在正确的轨道上。我认为您的Link组件和您的用户界面Button组件可能相互干扰。

材料界面在此处进行了更多说明： https://material-ui.com/components/buttons/#third-party-routing-library

但是，您也可以尝试使用button本身的onClick处理程序来路由您的应用程序：

<Button className={classes.button} onClick={() => {this.props.history.push('/xd')}} variant="raised" disableFocusRipple="false"  disableRipple="false"  centerRipple="false"  color="secondary">
   About
</Button>

React JS使用<link>材质ui调用路由

1 个答案: