使用 Typescript 在 React 中重定向

Posted 2023-02-21

【中文标题】使用 Typescript 在 React 中重定向

【英文标题】：Redirect in React with Typescript

【发布时间】：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>
    )

【参考方案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并且你在渲染方法中使用了三元运算符，它不应该在组件加载时重定向。我必须出去，我会在几个小时内回来。如果你不能让它工作，在这里再发一次，我会给你做一个代码沙箱示例。

我只是在实际工作开始之前练习。