Redirect in Reagieren mit Typescript

Question

Ich arbeite an Reagieren mit Typescript. "Redirect" scheint bei mir nicht zu funktionieren. Ich weiß nicht, was das Problem ist.

import * as React from "react" 
import { TextField } from 'office-ui-fabric-react/lib/TextField'; 
import { PrimaryButton } from 'office-ui-fabric-react/lib/Button'; 
import store from "./ToDoStore" 
import { Redirect} from "react-router-dom"; 
export class AddTodo extends React.Component { 


refs: { 
    name: (HTMLInputElement); 
    description: (HTMLInputElement); 
} 

addTodo() { 
    store.addTodo({ name: this.refs.name.value, description: this.refs.description.value }) 
    alert("Task added successfully"); 

<Redirect to="/home" push/> 
} 

render() { 

    return (
     <div id="addtodo"> 
      <TextField 
       label='Add Todo' ref="name" 
      /> 
      <br /> 
      <TextField 
       label='Add Description' ref="description" 
      /> 
      <br /> 
      <PrimaryButton text="Add" onClick={this.addTodo.bind(this)} /> 
     </div> 
    ) 
} 

}

Answer 1

Dies ist kein Typoskript verwandtes Thema. Dies ist eine unsachgemäße Verwendung von <Redirect/>. Sie versuchen, eine JSX-Komponente in einem Rückruf zu verwenden; Das wird nicht funktionieren. Was Sie tun müssen, ist einige Zustandsänderung, wenn ein Todo hinzugefügt wird und die Komponente <Redirect/> bedingt rendern, wenn dieser Zustand wahr ist.

Versuchen Sie das folgende Refactoring.

export class AddTodo extends React.Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      shouldRedirect: false 
     }; 

     this.addTodo = this.addTodo.bind(this); 
    } 


    refs: { 
     name: (HTMLInputElement); 
     description: (HTMLInputElement); 
    } 

    addTodo() { 
     store.addTodo({ name: this.refs.name.value, description: this.refs.description.value }) 
     alert("Task added successfully"); 

     this.setState({ shouldRedirect: true }); 
    } 

    render() { 
     return (
      <div id="addtodo"> 
       { 
        this.state.shouldRedirect ? 
         <Redirect to="/home" push/> : 
         <div> 
          <TextField 
           label='Add Todo' ref="name" 
          /> 
          <br /> 
          <TextField 
           label='Add Description' ref="description" 
          /> 
          <br /> 
          <PrimaryButton text="Add" onClick={this.addTodo} /> 
         </div> 
       } 
      </div> 
     ); 
    } 
} 

Answer 2

Sie können programmatisch zu einer anderen Seite navigieren this.props.history.push verwenden. Ihre Klasse exportieren mit reagieren-Router-dom withRouter(AddTodo) für Geschichte wie

//Import 
import { withRouter } from "react-router-dom"; 

Ihre Komponente

/*Your component*/ 
class AddTodo extends React.Component { 
    ..your code goes here 
} 

export default withRouter(AddTodo); 

zu arbeiten und in Ihrer addTodo Methode

addTodo() { 
    // Task added successfully 
    if(success) { // Go to home page if success 
     this.props.history.push('/home'); 
    } 
}