Question

我正在尝试将新组件重定向到新组件。想象一下，创建者提示询问名称，一旦他们点击了create，我将其重定向到该组件。

我不太了解以下原因的作用：

class myComponent extends Component{
    constructor(props){
        super(props);
        this.state = {
            redirect: false,
        }
     }

    setRedirect = () => {
       this.setState({
            redirect: true
        })
    }

    doRedirect = () => {
        if(this.state.redirect){
            return <Redirect to='/newComponent'/>
        } 
    }

    <Button type="Submit" onClick={this.setRedirect}>
        Go!
    </Button>

但这不起作用：

doRedirect = () => {
    <Redirect to='/newComponent'/>
}

<Button type="Submit" onClick={this.doRedirect()}>
    Go!
</Button>

我也在尝试传递上面代码中未显示的道具。为什么重定向需要与布尔值关联才能工作？

Answer 1

问题出在您在不是<Redirect />函数的函数中返回render()对象。

尝试一下（未经测试的代码）：

class myComponent extends Component{
    constructor(props){
        super(props);

        this.state = {
            redirect: false,
        }
     }

    setRedirect = () => {
       this.setState({
            redirect: true
        })
    }

    render() {
        return (
            <Button type="Submit" onClick={this.setRedirect}>
                {this.state.redirect} && <Redirect to='/newComponent'/>
                Go!
            </Button>
        );
    }
}

所做的更改： -确保以render()方法返回组件。

Answer 2

第二种方法不起作用，因为该逻辑可能不适用于该组件。

首先，重定向与布尔逻辑无关。在渲染方法中的某处使用它时，它会重定向您提供的任何路径。您只需将其绑定到条件（如果需要）即可进行重定向。此绑定可以是布尔逻辑，也可以是检查条件的其他方法。

您尚未提供完整的代码，尤其是render方法，但是有效的代码可能是这样的：

class myComponent extends Component {
    constructor(props){
        super(props);
        this.state = {
            redirect: false,
        }
     }

    setRedirect = () => {
       this.setState({
            redirect: true
        })
    }

    doRedirect = () => {
        if(this.state.redirect){
            return <Redirect to='/newComponent'/>
        } 
    }

    render() {
        return (
            <div>
                <Button type="Submit" onClick={this.setRedirect}>
                    Go!
                </Button>
                {this.doRedirect()}
            </div>
        )
    }
}

在这里您可以看到我们正在调用render方法中的doRedirect函数。但是，由于初始redirect状态为false，因此该函数不会返回任何结果。我们只在这里看到我们的按钮。当我们单击按钮时，它会更新状态，重新渲染组件，doRedirect函数会再次运行，但是这次它返回Redirect组件并由组件渲染。

这是您的第二个代码，其中包含您的逻辑，如@Avious在注释中指出的，return中的doRedirect。如果您不在那里使用返回键（或正确使用箭头功能，这意味着要删除花括号以使用速记返回键），您将一无所获。

class myComponent extends Component {
    constructor(props){
        super(props);
        this.state = {
            redirect: false,
        }
     }

    setRedirect = () => {
       this.setState({
            redirect: true
        })
    }

    doRedirect = () => {
            return <Redirect to='/newComponent'/>
    }

    render() {
        return (
            <div>
                <Button type="Submit" onClick={this.doRedirect()}>
                    Go!
                </Button>
                {this.doRedirect()}
            </div>
        )
    }
}

这里有两个问题。首先是您立即调用按钮中的功能。这不是我们在按钮中使用回调函数的方式。按钮使用这样的回调函数：

<Button type="Submit" onClick={() => this.doRedirect()}>
    Go!
</Button>

当我们单击按钮时，它会调用其回调函数，并且此函数会执行某些操作，在此调用另一个函数。

第二个问题是，这里的按钮是不必要的！我们已经在render方法中调用了doRedirect函数，由于在上一个示例中没有像state这样的条件，因此它在第一个渲染中立即返回Redirect。

因此，正确的逻辑是将Redirect绑定到条件或操作并检查其结果，然后进行重定向。

通过onClick使用React Router的重定向

2 个答案: