我正在尝试将类组件 React 应用程序迁移到带有钩子(Hook)的功能组件。
当使用类组件时,我通常传递 Link组件到Button组件,因为我使用 react-router-dom图书馆。
但现在我尝试使用 Paratron/hookrouter用于路由的库,但在将 A
组件传递给按钮时出现错误:
TypeError: props.href is undefined
我的代码现在看起来像这样:
import React, { Fragment } from 'react';
import { Grid, Button } from '@material-ui/core';
import { A } from 'hookrouter';
import './styles.css';
const Home = props => {
return (
<Fragment>
<Grid container spacing={24} className="landing">
<Grid item xs={6}>
<Button
variant="contained"
color="primary"
size="large"
component={A}
to="/login"
>Login</Button>
</Grid>
<Grid item xs={6}>
<Button
variant="contained"
color="secondary"
size="large"
component={A}
to="/contact"
>Contact us</Button>
</Grid>
</Grid>
</Fragment>
);
}
export default Home;
我猜这个 A
组件不包含 href
属性。不知道如何继续。如有任何意见,我们将不胜感激。
最佳答案
您需要提供“href”属性,而不是“to”属性。
<Fragment>
<Grid container spacing={24} className="landing">
<Grid item xs={6}>
<Button
variant="contained"
color="primary"
size="large"
component={A}
href="/login" //href
>Login</Button>
</Grid>
<Grid item xs={6}>
<Button
variant="contained"
color="secondary"
size="large"
component={A}
href="/contact" //href
>Contact us</Button>
</Grid>
</Grid>
</Fragment>
我还必须用类组件包装 A,因为 A 可能是函数组件,并且它们不能保存引用(这是按钮组件 prop 所需要的)
可以引用这个工作CodeSandbox演示
关于reactjs - 使用 hookrouter React Material UI Button 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57979005/