Question

我正在Reactjs中创建一个应用程序。我有app.js，dashboard.js和login.js。

在我的app.js中，我有一个登录页面的链接。我想从登录页面切换到仪表板页面。在我的登录中，我正在调用后端服务并验证用户凭证。我在login.js

中有以下代码

   request.post(
         options,
        function (error, response, body) {
            if (!error && response.statusCode === 200) {
                console.log('redirecting');

                // browserHistory.push('/dashboard')
                // ( <Redirect to={{
                //   pathname: '/dashboard'
                // }}/>)
                // this.props.history.push('/dashboard');

                <Redirect to='./dashboard' />  // redirection is not working here 

            }else{
                console.log(error);
            }
        }
    );

当我输入用户凭据时，验证后我可以看到在控制台中重定向消息，但页面没有重定向。

我正在使用react-router-dom。你能帮我找出问题所在吗？

Answer 1

您正在尝试将jsx代码放入函数中。 jsx代码在渲染函数内工作，点击<Redirect to='./dashboard' />将重定向到仪表板页面。但是你试图以编程方式重定向。

使用browserHistory.push('/dashboard')从功能重定向。

这是参考Navigating Outside of Components

Answer 2

我相信你只能在你的一个组件中使用<Redirect>作为渲染元素（而不是在JS函数中）。

因此，在您调用此函数的login页面中，如何在服务器响应之后设置变量以指示用户是否已成功登录，然后根据其值显示{ {1}}。

例如，

<Redirect>

并在您的request.post( options, function (error, response, body) { if (!error && response.statusCode === 200) { console.log('redirecting'); this.setState({ isLoggedIn: true }) }else{ console.log(error); } } );方法中：

render

loginjs登录后重定向

2 个答案: