2

I am trying to migrate a class component React app to functional components with hooks.

When using class components I use to pass a Link component to a Button component since I was using react-router-dom library.

But now I am trying to use Paratron/hookrouter library for routing but I get an error when passing an A component to the Button:

TypeError: props.href is undefined

My code now looks like this:

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;

I guess this A component does not contain an href property. Not sure how to proceed. Any comments will be appreciated.

Linda Paiste
  • 38,446
  • 6
  • 64
  • 102
Maramal
  • 3,145
  • 9
  • 46
  • 90

1 Answers1

4

You need to provide 'href' prop, not 'to' prop.

<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>

I also had to wrap A with class component, since A is probably function component, and they can't hold a ref (which is required by button component prop)

You can refer to this working CodeSandbox demo

Ido
  • 5,363
  • 2
  • 21
  • 30
  • I completely forgot. That `to` property was related to the `Link` component. So, this `href` is related to the `A` component. Thank you. – Maramal Sep 17 '19 at 17:37