如何将属性作为道具传递给React js路由？

Question

我查看了许多其他堆栈溢出问题，这些问题看起来与我的问题相似，但是它们都没有任何帮助。

所以这就是我想要做的。

在App.js中：基本上，我做了一个要在链接页面中使用的函数singedInToggleHandler。

signedInToggleHandler = () => {
    this.setState( (prev) => {
      return {signedIn: !prev.signedIn};
    });
  };

<Route path = '/Login' component = {LoginScreen} 
                render = { (props) => (<LoginScreen SignedInToggleHandler = {this.signedInToggleHandler}/>)}/>

上面的最后一行是我传递函数的方式。

然后我进入LoginScreen.js]

 formType = <SignIn SignedInHandler = {props.SignedInToggleHandler}/>

仅将其传递给另一个组件SignIn.js

SignIn.js

function handleSubmit(event){
        console.log("Submitted");
        event.preventDefault();
        console.log(email,password);
        const user = SignIn(email,password);
        console.log(user);
        props.SignedInToggleHandler();
    }

现在这是我访问它的最后一个地方。在这里，我想使用从App.js获得的SignedInToggleHandler（）但是我收到错误消息：

非常感谢您的时间和帮助！

Answer 1

您的错误在这里

<Route path = '/Login' component = {LoginScreen} 
                render = { (props) => (<LoginScreen SignedInToggleHandler = {this.signedInToggleHandler}/>)}/>

您正在使用具有component功能的render道具。但是根据doc，

警告：<Route component>优先于<Route render>，因此请不要在同一个<Route>中使用两者。

要解决，请移除component属性。 render道具会起作用。

<Route path = '/Login' 
                    render = { (props) => (<LoginScreen SignedInToggleHandler = {this.signedInToggleHandler}/>)}/>