score:1
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:
- style a link to look like a button, or
- 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>
Source: stackoverflow.com
Related Query
- Have to Click link Twice in order for Link to work
- Why do I have to click TextField twice in order for my list to display?
- Why do I have to click twice for an event in react js
- Why do I have to click twice for an event to fire in react?
- I'm working with React Route, and I have a random string, but when I do click on the link page works but when a do click again doesn't work
- Why do I have to click Submit button TWICE in order to update my useState() hook?
- I have to click twice to re-render my updated state and the callback function doesn't work
- I have to click on my link twice before state is update and styling is changed
- Higher Order React Component for Click Tracking
- React Router Link Right Click does not work
- Metarial UI useMediaQuery hooks render twice to React Component, do you have any solution for it?
- My button needs to be clicked twice to render the new component for the first click React
- Ant design Tree defaultExpandAll doesnt work with button click for react
- Have an input with validation for email, trying to clear out error message and grey out input on click of checkbox
- Component making axios request being mounted twice in order for asynchronous test to pass, if it is mounted once the test fails. WHY
- Why when I use onClick with radio button make them have to click twice to make radio button to be selected?
- React.js Have to press button twice for register
- React - I have to click a button twice to display api data
- Radio Buttons In React - I Have To Click Twice To See A Selection And Update State
- I have to click twice on the checkbox to filter my cards in React
- next JS apollo Link change clears query, have to refresh page for query to run
- I have to refresh the page for component did mount to work
- I have to click the display button twice to render the data to the screen?
- I have a task file of GULP for compile js file with JSX code using babelify, but not work it
- React-hook-form Have to press twice for deleting the last character of input and twice for enter the first character
- Should we make different reducers for a single object received as api response in order to avoid complexity. Or have one reducer for it
- Trying to set state for individual todo items and have them maintain and toggle between 3 colors on click
- Search does not work for link text in material table
- must click twice for state to be set and then call function
- history.push and Link change the URL and not re render the component if I have many routes for the same component
More Query from same tag
- Render react Component from Map Object
- withFormik, pass function as props
- JavaScript inner lambda function without var, let or const
- i have data in my shopify api i want to use that data in my reactjs app how do i do that
- Why my react-bootstrap modal component displays like that?
- Using 'useEffect' inside my App function in my _app.js for my NextJS app
- Material-UI : Rating Component, change color based on value
- how to navigate from one page to another in react js?
- How to merge and unzip (.zip, .z01, .z02) in javascript (client side only)?
- React accessing setState in callback without arrow function
- how to send cookies with axios post method using react Js
- How to add async functionality to a Firebase 'put' and 'set' query operation
- Call a function from a class in another file
- Custom button hover state in Grommet theme
- How to import `.../` in React?
- Why does Knex insert null values into my table database?
- Text input not updating the value
- How should I unit test mapDispatchToProps in Redux?
- Next JS with react Bootsrap
- Got error: `RangeError: invalid time value` while set XAxis date value use date-fns
- Enzyme testing with React/Redux - shallow rendering issues with setState
- Typescript React event handler types
- No CSS is being recognized.... what am I doing wrong?
- usage of purgecss safelist option gives UnhandledPromiseRejectionWarning
- How to render a random object from an array
- How can we use react jsx templates in node-webkit
- I am facing problem using Simple React Lightbox Next js?
- Passing Multiple Refs from Child Component to Parent Component-Reactjs
- PrevProps giving same value as props
- Testing react component using rxjs library with enzyme