score:8
where did you define history
here? there is a global window.history
which is a web standard. if you want to use the react-router history, it's passed as a prop. try props.history.push()
instead.
the component must receive the history
prop from react router. so it should be a direct child of a route
component, for example, or you must pass down props via its parents.
score:2
in react 16 and above you can use redirect from 'react-router-dom'. in your case you will get same outcomes if you use redirect instead history.
import { redirect } from 'react-router-dom'
define state in your component
this.state = {
loginstatus:true
}
than in your render method
render () {
if(this.state.loginstatus){
return <redirect to='/home' />
}
return(
<div> please login </div>
)
}
edit: using this.props.history
there are two things i found missing in your code. one is your login method
binding. bind your method so that you can get access to this
of class.
other things is use withrouter
hoc. withrouter
will give you
access to the this.history prop. like so below.
import react from "react";
import { withrouter } from "react-router";
class mainclass extends component {
constructor(props) {
this.login = this.login.bind(this)
}
login(){
this.props.history.push('/new-location')
}
render(){
return (
<div classname="loginwrapper">
<button onclick={this.login} classname="btn btn-
primary">pieteikties</button>
</div>
)
}
export default withrouter(mainclass);
score:21
update: i found a new way to do this type of thing. same as b4 you need to install them types:
1.- npm i react-router react-router-dom
2.- npm i -d @types/react-router @types/react-router-dom
import react from "react";
import { routecomponentprops } from "react-router-dom";
interface mycomponentprops extends routecomponentprops {
someofyourownprops: any;
somemorepropsifneedit: any;
}
interface mycomponentstate {
someproperty: any;
another: any;
}
export class mycomponent extends react.component<mycomponentprops, mycomponentstate> {
public state: mycomponentstate;
public constructor (props: mycomponentprops) {
super(props);
this.state = {
someproperty: "",
another: ""
}
}
public onclickhandler (evt: react.mouseevent<htmlbuttonelement, mouseevent>): void {
evt.preventdefault();
}
public componentdidmount () {
this.props.history;
}
public render (): react.reactelement<mycomponentprops> {
return (
<div>trol</div>
)
}
}
hihitl i know whats happening. hope you sill need it.
1.- npm i react-router react-router-dom
2.- npm i -d @types/react-router @types/react-router-dom
import react from "react";
import { history, locationstate } from "history";
interface mycomponentprops {
someofyourownprops: any;
history: history<locationstate>;
somemorepropsifneedit: any;
}
then on your component if it is a class do
class mycomponent extends component<mycomponentprops, {}> {}
if it is a functional
const mycomponent = (props: mycomponentprops) => {}
Source: stackoverflow.com
Related Query
- TS2339: Property 'focus' does not exist on type '{}'. with React typescript
- React with TypeScript - Property 'value' does not exist on type 'EventTarget'
- Property does not exist on type 'DetailedHTMLProps, HTMLDivElement>' with React 16
- React with Typescript: Property 'push' does not exist on type 'History'
- react hooks and typescript - Property '***' does not exist on type 'never'
- React Hooks with typescript: Property 'data' does not exist on type
- Property 'name' does not exist on type 'EventTarget' - React + TypeScript
- Transpiling error in Typescript with React: Property does not exist on type 'IntrinsicAttributes'
- React Custom Hook with Typescript Type error "Property 'x' does not exist on type 'interface | (({ target }: any) => void)'.ts(2339)"
- Typescript Property '' does not exist on type 'never'. in React NodeJs stack
- Property 'location' does not exist on type 'Readonly<{}> - React Router and Typescript
- React Typescript property does not exist on type / IntrinsicAttributes & IntrinsicClassAttributes
- React Typescript Custom Hooks: Property 'prop_name' does not exist on type '{}'
- TypeScript Property 'value' does not exist on type 'HTMLElement'. React Jest Testing
- Property does not exist on type error with Union Types in Typescript Reac + Redux
- Property does not exist on state - Using React Router Hooks with TypeScript
- How to remove Property 'length' does not exist on type '{}' in React Typescript
- Property 'elements' does not exist on type 'EventTarget' in React Typescript
- React Custom Hook with Context and Typescript: Property 'map' does not exist on type 'Option'
- Cannot Play Audio in React Typescript with play() function | Error: Property 'play' does not exist
- TypeScript errors in React Class Component property does not exist on type 'Readonly<{}>', not sure how to set types for state
- Property 'rawValue' does not exist on type 'EventTarget & HTMLInputElement' error while using typescript with cleave.js
- React TypeScript & ForwardRef - Property 'ref' does not exist on type 'IntrinsicAttributes
- React TypeScript Property 'assign' does not exist on type 'Object constructor'
- Property 'props' does not exist on type '{}' (trying to get access to props of children) - React Typescript
- React typescript : Property 'path' does not exist on type 'IntrinsicAttributes & Pick<any, never>'
- React Typescript property does not exist on type during array map
- React typescript Property 'map' does not exist on type 'User'
- React Redux Saga with Typescript error property does not exist
- Property "handle" does not exist on type "undefined" - react context and typescript
More Query from same tag
- spring boot and reactjs for frontend was working fine till i add security to the backend
- Draft.js: Change color of caret
- Creating dependant fields in Reactjs?
- TypeError: instance.render is not a function white creating dynamic inputs in React
- The root path "/" does not match the reactjs declared route on server side rendering, when webpack middleware is used
- ES2015 non-mutating array swap in React component (or flux action)
- How to handle click on child element
- Data from API call are stored in a Array but when i try to use that array in a function for further use it shows that array is empty . why?
- Unit-testing React Components using Context Consumers
- Trying to use scrollHeight in react
- Cannot read property 'contextTypes' of undefined Unit Testing enzyme
- Node.js REST endpoint not catching parameters passed from axios request
- Getting error when try to find existing product from localStorage in JavaScript
- How can I type a React.FC with non-optional `children`?
- Redirecting after deleting page / route in React and Redux
- How to prevent from upvoting twice in Firebase
- React Jest Enzyme change Material UI Checkbox
- Unable to import images in nextjs using next images package
- Calling card component
- How to organize the business logic in React+Redux+thunk
- Can I use more than one action in a component in redux
- Json Array compare with different length in javascript
- React: Component setState called repeatedly
- How to render the landing page in server and the rest in client side?
- Ant Design Date Picker doesn't change date on first attempt
- Pass this.props.params to a child component
- How do I navigate to another page?
- Problems with webpack-dev-server React
- I want to change display of a div when clicked -React Styled Component
- How can i solve FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore