Button as Link that routes to express semantic-ui react - semantic-ui-react

Question

I have a header in a react app that is using semantic-ui react. I want to route my login button to a backend express route (/auth/login). I tried the composition method by passing in {Link} from react-router-dom, but this is not routing to the express route, rather looking at the React routing.. in hindsight, this is of course how it should work..
This leaves me with the question though, how can I pass in a link to the backend api's for this button component? If I pass in 'a' and a path, this renders as a hyperlink but the path isn't passed in.
What is the prop I need to pass in to make this work as I can't see one that makes sense in the semantic-ui docs on buttons.. Or am I doing this the completely wrong way (this has happened before surprisingly)?
My login component is below..
import React, {Component} from 'react';
import { Button, Icon } from 'semantic-ui-react';
export default class LoginButtonNav extends Component {
render() {
return (
<Button primary animated="vertical" as='a' path='/auth/login'>
<Button.Content visible>Login</Button.Content>
<Button.Content hidden>
<Icon name="cloud" />
</Button.Content>
</Button>
);
}
}

Answer 1

Okay, rubber ducked this one myself, passing in a value for href solved it!
Correct component:
import React, {Component} from 'react';
import { Button, Icon } from 'semantic-ui-react';
export default class LoginButtonNav extends Component {
render() {
return (
<Button primary animated="vertical" as='a' href='/auth/login'>
<Button.Content visible>Login</Button.Content>
<Button.Content hidden>
<Icon name="cloud" />
</Button.Content>
</Button>
);
}
}
Still interested if there's a better way to do this..

Answer 2

I want to share my mistake and thank OP for posting the answer. Below is what I did and you should NOT do it like this:
<Button>
<Link to="/yourURL/">Nav Button</Link>
</Button>
This works technically but creates a unique problem where user MUST click on the text directly ("Nav Button" in this case) because the button itself is not rendered as a hyperlink. So if you click within the button but not the text itself, it won't navigate. It would even create an odd behavior where if you have another button next to it. Say, you have a "Submit" and a "Cancel" button where the Cancel button navigates user to the previous URL, if you click within the Cancel button but not the "Cancel" text, it would trigger the Submit button action instead. Hope this helps someone learning React!