Redirect in React with Typescript

Question

I am working on React with Typescript. "Redirect" doesn't seem to work for me. I don't know what the problem is.

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>
    )
}

}

Solution 1

This is not a typescript related issue. This is improper usage of <Redirect/>. You are trying to use a JSX component in a callback; this won't work. What you need to do is have some state change when a todo is added and conditionally render the <Redirect/> component when that state is true.

Try the below 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>
        );
    }
}

Solution 2

You can programmatically navigate to another page using this.props.history.push. export your class with react-router-dom withRouter(AddTodo) for history to work like

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

Your component will be

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

export default withRouter(AddTodo);

And in your addTodo method

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