用挂钩路由器反应材料UI按钮组件

Question

我试图用钩子将类组件迁移到函数组件上。

在使用类组件时，我使用链接组件将按钮组件传递给按钮组件，因为我使用的是反应路由器库。

但是，现在我尝试使用Paratron/挂钩路由器库进行路由，但是当将A组件传递给Button时，会出现一个错误：

TypeError: props.href未定义

我的代码现在看起来如下：

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属性。不知道该怎么做。如有任何意见，将不胜感激。

Answer 1

你需要提供'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可能是函数组件，而且它们不能容纳引用(按钮组件支柱所需要的)。

您可以参考这个工作的CodeSandbox演示