score:1

Accepted answer

your logic isn't clear. initially you assume that the user isn't logged in, if you know this for certain then you shouldn't need to call checkuser. however, because you're not sure you are calling your login api - or perhaps this is the only call to your login api?

the best choice would be to remove <link to={linkto}>login</link> and const linkto = this.state.login ? "/home" : "/login"

then inside checkuser on a successful login programatically navigate to /login:

this.props.history.push('/login')

or

render() {
  if (this.state.login) return <redirect to="/login" />;
  ...
}

you can put the link anywhere else. just don't wrap it in a button, as that functionality will conflict with the function attached to your button. avoid wrapping links in buttons or vice versa, just in plain html their functionality is separate and will conflict.

do one or the other:

  1. style a link to look like a button, or
  2. if you really need to navigate using a button do it programmatically - generally it's not good for seo. but for a login form it's fine.

score:1

your entire logic there is very problematic. your button needs to trigger the login process, and nothing else. it cant both be a "login" button, and a link. after the login is complete, you can manually redirect to wherever you want. for instance:

fetch(request).then((response) => {
            response.json().then((data) => {
                //do some checking if the login is successful..
                //if it is, redirect:
                this.props.history.push('/home')
            })
        }).catch(function(err){
            console.log(err)
        });

the button:

<button onclick = {this.checkuser.bind(this)}>login</button>

Related Query

More Query from same tag