使用 hookrouter 反应 Material UI 按钮组件

Question

我正在尝试将 class 组件 React 应用程序迁移到带有挂钩的功能组件。

当使用 class 组件时，我用来传递 Link component to a Button component since I was using 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 属性。不确定如何进行。如有任何意见，我们将不胜感激。

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>

我还必须用 class 组件包装 A，因为 A 可能是函数组件，并且它们不能包含 ref（按钮组件 prop 需要）

你可以参考这个工作CodeSandbox演示

使用 hookrouter 反应 Material UI 按钮组件

React Material UI Button component with hookrouter

reactjs

material-ui

hookrouter