登录后重新反应 JS 重定向

Question

我正在Reactjs中创建一个应用程序。我有应用程序.js，仪表板.js和登录.js。

在我的应用程序中.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') 从函数重定向。

这是一个参考 在组件外部导航

Answer 2

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

因此，从您调用此函数的login页面中，如何在服务器响应后设置一个变量以指示用户是否已成功登录，然后根据其值显示<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方法中：

if (this.state.isLoggedIn) {
  return <Redirect to='./dashboard' />
}
return (
  // If the user is not logged in, return the usual login page...
)