使用 Typescript 在 React 中重定向答案

【问题标题】：Redirect in React with Typescript使用 Typescript 在 React 中重定向
【发布时间】：2018-05-20 16:01:47
【问题描述】：

我正在使用 Typescript 开发 React。 “重定向”似乎对我不起作用。不知道是什么问题。

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

}

【问题讨论】：

标签： reactjs typescript redirect react-router

【解决方案1】：

您可以使用this.props.history.push 以编程方式导航到另一个页面。使用 react-router-dom withRouter(AddTodo) 导出您的类，以使历史能够正常工作

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

您的组件将是

/*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');
    }
}

【讨论】：

他们首先需要用 withRouter HoC 包装他们的组件才能访问历史记录。
@KyleRichardson - 是的，这是正确的。我错过了一些东西并更新了答案。谢谢提示！
@ElumalaiKaliyaperumal 唯一可行的方法是如果我使用Router（AddTodo as any）导出默认值；正确的类型是什么？还是应该让 AddTodo 的 props 扩展一些其他接口？

【解决方案2】：

这不是打字稿相关的问题。这是<Redirect/> 的不当使用。您正在尝试在回调中使用 JSX 组件；这行不通。您需要做的是在添加待办事项时进行一些状态更改，并在该状态为 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>
        );
    }
}

【讨论】：

谢谢！！！。有效。但不是点击按钮。直接在组件渲染上工作
如果你的开始状态是shouldRedirect: false并且你在渲染方法中使用了三元运算符，它不应该在组件加载时重定向。我必须出去，我会在几个小时内回来。如果你不能让它工作，在这里再发一次，我会给你做一个代码沙箱示例。
我只是在实际工作开始之前练习。