Custom HTML Button wrapped in Link not working - reactjs

Question

I have made a custom Button component that returns HTML button. Now I am using this Button inside Link from next-routes. The problem is that it does not work this way. Weird thing is that button works correctly if I use HTML button inside Link. However, both button are being rendered in the DOM in exact same way. Following is the code:
// Button.js
import React from "react";
import classNames from "classnames";
const Button = ({
children,
newClass = "",
onClickHandler = () => { },
isSubmitting = false,
inlineBtn = true,
disabled,
primary,
secondary,
basic,
notCentered = true,
shaded,
miniLoader,
type = "button",
isTransparent,
fontClass = "",
small
}) => {
return (
<React.Fragment>
<button
className={classNames(
`${isTransparent ? 'btn-transparent' : 'btn'} ${fontClass} ${newClass}`,
{
"btn-block": !inlineBtn,
"col-mx-auto": !notCentered,
"btn-primary": primary,
"btn-secondary": secondary,
"btn-basic": basic,
shaded: shaded,
loading: isSubmitting,
"loading-sm": miniLoader,
"btn-sm": small
}
)}
disabled={disabled}
type={type}
onClick={onClickHandler}
>
<span>{children}</span>
</button>
</React.Fragment>
);
};
export { Button };
The following does not work:
<Link route="/register/location">
<Button basic small>
Sign Up
</Button>
</Link>
The following works fine:
<Link route="/register/location">
<button className="btn btn-basic btn-sm" type="button" onClick={() => { }}>
<span>Sign Up</span>
</button>
</Link>

Answer 1

You can update your Button component as the following.
const Button = ({
as = "button",
children,
newClass = "",
onClickHandler = () => {},
isSubmitting = false,
inlineBtn = true,
disabled,
primary,
secondary,
basic,
notCentered = true,
shaded,
miniLoader,
type = "button",
isTransparent,
fontClass = "",
small,
...rest
}) => {
const Wrapper = as;
return (
<Wrapper
className={classNames(
`${isTransparent ? "btn-transparent" : "btn"} ${fontClass} ${newClass}`,
{
"btn-block": !inlineBtn,
"col-mx-auto": !notCentered,
"btn-primary": primary,
"btn-secondary": secondary,
"btn-basic": basic,
shaded: shaded,
loading: isSubmitting,
"loading-sm": miniLoader,
"btn-sm": small
}
)}
disabled={disabled}
type={type}
onClick={onClickHandler}
{...rest}
>
<span>{children}</span>
</Wrapper>
);
};
This will allow custom Wrapper to be used for your Button component. And we pass every inherited props into your Wrapper so that your route props will be received in your Link component.
You can then use it like so
<Button basic small as={Link} route="/register/location">
Sign Up
</Button>
This uses the ES6 spread operator syntax. Basically you render your Button component as a Link component, and any inherited props will be passed to the Link component, hence route props is passed into Link component.
This follow the API Design Approach similar to Material-ui's spead approach. This will allow your component to be more flexible as well.