React js用<link>材质ui调用路由答案

【问题标题】：React js call a route with <link> material uiReact js用<link>材质ui调用路由
【发布时间】：2020-04-03 03:19:06
【问题描述】：

您好，我有一个带有工具栏和按钮的应用栏

const AppRouter = () => (
  <BrowserRouter>
    <div>
    <Header/>
    <Navigation/>
      <Switch>
        <Route path="/" component={LandingPage} exact={true} /> 
        <Route path="/xd" component={About} exact={true} /> 
        <Route component={NotFoundPage} />
      </Switch>

    </div>
  </BrowserRouter>
);

这是我的路：

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

当我单击其中一个按钮时，我只想更新内容容器不知道我说的对不对

【问题讨论】：

将这些按钮包装在Link 组件中应该具有您想要的效果。这不工作吗？
不是，我也不知道为什么:(
所以要确认一下，如果您在路径 "/" 上并单击包裹在 <Link to="/xd"> 中的第一个按钮组件 - 您的路径不会更改为 "/xd"？
是的，不要更改为 /xd
而且我的路线是正常的，我认为是我的导航栏有问题

标签： reactjs react-router material-ui

【解决方案1】：

在这里，您的navbar 和header 与您的switch 声明相邻，您肯定走在正确的轨道上。我认为可能是您的 Link 组件和您的 material-ui Button 组件可能相互干扰。

Material UI 在这里解释更多： 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>

【讨论】：