Question

我有一个导航栏

在我单击按钮的地方，它将调用另一个页面但是我正在使用功能组件

还有我，我不知道如何获得历史

我尝试过：

onClick = {（）=> {this.props.history.push（'/ xd'）}}

我有错误：

无法读取未定义的属性“ props”

export default function Navigation({props}) {
    const classes = useStyles();
    return (
        <AppBar position="static" className={classes.appBar} >
          <Container maxWidth="lg">
        <Toolbar >
<Link to="/xd">
<Button className={classes.button} onClick={() => {this.props.history.push('/xd')}} 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>
    );
}

我的路线应用

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

export default AppRouter;

Answer 1

您不能以此方式破坏道具-我建议您从参数中删除大括号{}：

function Navigation(props) {

但是如果您真的想使用解构：

function Navigation({ history })

接下来的事情-this在函数表达式中未定义-只需使用{() => props.history.push('/xd')}

您可能必须用withRouter HOC包装组件。

export default withRouter(Navigation);

Answer 2

您不能在功能组件中使用this，请尝试使用props.history.push('/xd')，

如果您使用的是react-router，请确保使用withRouter将组件包装起来

History.push无法读取未定义的属性“ props”

2 个答案: