Typescriptとのリダイレクト

Question

私はReact with Typescriptに取り組んでいます。 "リダイレクト"は私にとってはうまくいかないようです。 問題の内容がわかりません。

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

これはtypescriptです関連の問題ではありません。これは、<Redirect/>の不適切な使用です。コールバックでJSXコンポーネントを使用しようとしています。これは動作しません。あなたがする必要があるのは、todoが追加されたときに状態の変更があり、その状態がtrueのときに条件付きで<Redirect/>コンポーネントをレンダリングすることです。

次のリファクタリングを試してください。

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

this.props.history.pushを使用して、プログラムで別のページに移動できます。あなたのコンポーネントが

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

export default withRouter(AddTodo); 

そして、あなたのaddTodo方法

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