score:0
you can't use hooks in a class component, it can only be used in just functional components. that's why you are getting this error.
you can redirect in class components by using
import { redirect } from 'react-router-dom'
<redirect to="/dashboard" />
score:0
you cannot use hooks like 'usehistory' in class based component, so change your handlesubmit function to something like this:
handlesubmit(e) {
e.preventdefault();
//const history = usehistory();
this.setstate({ submitted: true });
const { username, password } = this.state;
const { dispatch } = this.props;
let errors = {};
if (username == "admin" && password == "admin") {
props.history.push('/dashboard');
console.log("logged-in");
} else {
errors["credentials"] = "you have entered the wrong username or password.";
}
this.setstate({
errors: errors
});
}
you can use props.history.push
score:0
when you have used a class component you cant use hook in react so you need to used another thing like if the component that is used inside the route is in the browser route you can this.props.history.push('your location')
if not found like that
<route to="login" component={login}/>
else you can use this shape <redirect to="/dashboard" />
score:1
react hooks aren't compatible with class-components, they can only be used by function components and custom react hooks, so you will need to access the history
object another way.
if
login
component is directly rendered by aroute
component, i.e.<route path="......" component={login} />
then route props are already injected as props. you can safely accessthis.props.history
and issue the imperative navigation.handlesubmit(e) { e.preventdefault(); this.setstate({ submitted: true }); const { username, password } = this.state; const { dispatch, history } = this.props; // <-- destructure const errors = {}; if (username == "admin" && password == "admin") { history.push('/dashboard'); // <-- navigate } else { errors["credentials"] = "you have entered the wrong username or password."; this.setstate({ errors }); // <-- move error state update here } }
use the withrouter higher order component to inject the route props, then access the
history
object as above.import { withrouter } from 'react-router-dom'; ... export default withrouter(login);
don't forget to update and default import
login
here it's rendered.
Source: stackoverflow.com
Related Query
- Reactjs - Login redirect but has Invalid Hook Call
- Hooks error: Invalid Hook Call using NextJS or ReactJS on Windows
- Error: Invalid Hook call on component list map. ReactJS
- ReactJS Invalid hook call while add useStyle variable
- Invalid Hook Call in reactjs
- React hooks in react library giving Invalid hook call error
- propType [name] is not required, but has no corresponding defaultProps declaration ReactJS
- Yarn Workspaces and Invalid Hook call
- Cant use Hooks with my React Component Library. Invariant Violation: Invalid hook call
- Invalid Hook Call Warning Linking a react-app and a local npm package
- Using Material UI is causing invalid hook call warning
- react-intl with react-testing-library gives Invalid hook call error
- Invalid hook call on npm-link library
- React useContext throws Invalid hook call error
- React Hooks won't work on Firebase Cloud Functions Error: Invariant Violation: Invalid hook call
- React-Native Invalid hook call for Flat List Render Item
- Invalid hook call on npm module
- Invalid hook call for using useHistory, useLocation hooks
- Error: Invalid hook call at Provider,while using react-redux
- How redirect to login page when got 401 error from ajax call in React-Router?
- React bootstrap - Invalid hook call
- React navigate router v6 invalid hook call
- Block editor giving invalid hook call error
- Redirect user to intended url after login Reactjs
- React hooks in Gatsby: Invalid hook call
- React invalid hook call error and storybook 6
- Importing and using component from custom React Component Library results in Invariant Violation: Invalid hook call
- Invalid hook call. Hooks can only be called inside of the body of a function component when i call useQuery in useEffect
- useHistory react-router-dom invalid hook call
- React.js - Redux Hooks Invalid Hook Call
More Query from same tag
- React-router not rendering Component
- Cannot find name 'withStyles
- Apply styles for each shape
- Webpack HotModule reloading with React Router render vs component
- React Get Another Component State
- is it possible to navigate to another route and going to a specific bookmark right after?
- Loops inside react jsx render function with if else conditions
- Cannot read property ' ' of null
- React component structure and passing state upward
- How can I use Mocha to unit-test a React component that paints on a <canvas>?
- How to upgrade react-router-dom to v6
- Configure babel to compile a specific package inside node_modules when testing with jest
- ReactJS: Change state of child component
- Do i really need to use forceUpdate with fetch API and ReactJS
- Align input with labels to button without label (vertically)
- TypeError: Cannot read property 'map' of undefined when I am trying to access API call data
- Why the componentDidUpdate is infinitely updated?
- react js popover overlay not working. Getting 'React.createElement type is invalid expected a string
- What is the cleanest way to remove an element from an immutable array in JS?
- Mapbox production error in console. "Uncaught ReferenceError: y is not defined"
- Using React with Meteor: how to handle Meteor.user() after logging out
- Storing an array in a React Hook by giving a prop to the component
- Actions must be plain objects. Use custom middleware for async actions How to dispatch action
- To avoid the 'Access-Control-Allow-Origin' issue, how should CORS be set up on a MERN app that calls an API that is located somewhere else?
- React: Send array only
- Show React component based on click event
- How to get which word is selected in span
- React: how can I get multiple image size?
- Can't use Bootstrap in React?
- How to have component reusable in React TypeScript when passing array of objects as data