Question

我在众多在线视频之后创建了一个学习应用程序，并提供了一个小型登录屏幕。我的进步很大。

（代码见https://github.com/CraigInBrisbane/ReactLearning）

我的登录组件对我拥有的服务进行WebAPI调用，允许用户登录。

网站http://cralis-001-site5.ftempurl.com/ （点击登录，你：craig@here.com，p：密码）它是一个虚拟学习网站......

我的代码结构是这样的：

接下来我要做的是，在登录成功时，做两件事。

转到/。即转到我的主屏幕。
更新我的NavBar，删除“登录”按钮，然后将其替换为“注销”按钮。

所以我想将prop传递给我的Login组件，这是对方法Somewhere的回调。这是我不知道的。我的应用程序的根目录在哪里？我在哪里放置更新Navbar的代码？我需要一个方法，可以从我的登录屏幕调用，然后更新我的NavBar组件。

我认为我的文件夹结构阻止我正确执行此操作。

如何在登录成功时重定向到Home组件？

 handleSignin(event) {
        event.preventDefault();
        this.setState({canLogin: false});

        var request = {
            method: 'POST',
            URL: "http://cralis-001-site5.ftempurl.com/api/authenticate",
            data: this.state
        }

        fetchData(request).then(response=> {
            this.setState({ canLogin: this.validateForm() }); // Set the button if the state is valid.

            let divStyle = {
                padding: '8px 8px 8px 8px',
                color:  '#ffffff'
            }
            var type = response.success ? 'success' : 'error';
            var message = response.message;

            toast(<div style={divStyle}>{message}</div>,
            {        
              className: {
                background: type.toLowerCase() === 'success' ? '#316972' : '#fc751a'
              }
            });
        });

    }

我正在做的就是显示一个Toast弹出窗口。我如何重定向到家？

Answer 1

我不会尝试触发单独的回调来更改NavBar，而是使用当前路径来确定是否确定要在NavBar中显示的内容。由于您使用的是react-router，因此传递给Route组件的每个组件都将传递location和history道具。如果您不想从顶部传递位置和历史支持，您还可以使用withRouter hoc来访问这些道具。在NavBar组件中，您可以执行this.props.location.pathname === 'login'之类的检查，以确定是否要显示注销。

要更改路线，请执行this.props.history.push('/')

一个孩子组件与ReactJS中的另一个兄弟姐妹说话

1 个答案: