'using Link from react-router-dom with button

I am using react-bootstrap Cards on my project. I have great view with that. I have horizontal search button on it. I would like to use this button for routing. I set my settings on my app.js class. Actually, I can change route with <Link> but my search button looks bad with it. I would like to use Search button while keeping visual design. Sorry for my explanation, It's hard to explain without any visual support. if it is not clear please leave comment and I would try to clarify with onether way.

Here is my codes;

<Card bg="dark" text="white" style={{ width: "18rem" }}>
    <Card.Header>SWITCH</Card.Header>
    <Card.Body>
        <Card.Title>Dark Card Title</Card.Title>
        <Card.Text>
            Some quick example text to build on the card title and make up
            the bulk of the card's content.
        </Card.Text>
    </Card.Body>
    <Button variant="secondary">SEARCH</Button>
</Card>

I can do routing with wit this code;

<Card bg="dark" text="white" style={{ width: "18rem" }}>
  <Card.Header>SWITCH</Card.Header>
  <Card.Body>
      <Card.Title>Dark Card Title</Card.Title>
      <Card.Text>
          Some quick example text to build on the card title and make up
          the bulk of the card's content.
      </Card.Text>
  </Card.Body>
  <Link to={"/route which I defined in app.js"}>
  <Button variant="secondary">SEARCH</Button></Link>
</Card>

But this time, search button's size decrease. Are there any way to stretch it? Or should I change usage of <Link> ?

Solution 1:^[1]

You probably will need to do some custom css styling still. You can open up your elements browser by clicking inspect in chrome and find the class of the link, then you can overwrite that class to match your styling needs.

Also try wrapping the link with the button

<Button variant="secondary"><Link>SEARCH</Link></Button>

NOTE: Even though it's not recommended and you should normally avoid it, you might need to use !important in your css when overwriting bootstrap.

Solution 2:^[2]

you can try, <Button as={Link} to="/your_destination">Foo</Button>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Smail Galijasevic
Solution 2	sohanemon

'using Link from react-router-dom with button

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]