Javascript React路由器在登录和注销时未重定向

我对React路由器只有几天的了解，我试图让它工作，但显然我错过了一些东西。我一直在看医生，但我一点运气都没有

这是我的课程：

App.js

constructor(props) {
    super(props);

    this.state = {
        page: 'login'
    }

    this.handleOnLogout = this.handleOnLogout.bind(this);
}

handleOnLogout(callback) {
    UserDAO.logout().then(() => {
        callback();
    }).catch(error => console.log(error));
}

render() {
    return (
        <Router>
            <div>
                <Navbar onLogout={this.handleOnLogout}/>
                <Switch>
                    <Route path="/login" component={LoginPage} />
                    <PrivateRoute path="/" component={Dashboard}/>
                </Switch>
            </div>
        </Router>
    );
}

function PrivateRoute({ component: Component, ...rest }) {
return (
    <Route
        {...rest}
        render={props => 
            UserDAO.isLoggedIn ? (
                <Component {...props}/>
            ) : (
                <Redirect
                to={{
                    pathname: "/login",
                    state: { from: props.location }
                }}
                />
            )
        }
    />
)
}

handleOnLogin(email, password, positive, negative) {
    let self = this;
    UserDAO.login(email, password).then(user => {
        console.log("Successfully logged in as user #" + user.id);
        positive("Successfully logged in, you'll be soon redirected to the homepage.");
        setTimeout(() => { self.setState({redirectToReferrer: true }) }, 500 );
    }).catch( error => {
        console.log("Error logging in with email/password auth: " + error);
        negative("Error logging in with email/password auth: " + error);
    });
}

render() {
    const { from } = this.props.location.state || { from: { pathname: "/" } };
    const { redirectToReferrer } = this.state;

    if (UserDAO.isLoggedIn || redirectToReferrer) return <Redirect to={from} />;

    return (
        <div className="login-page">
            <div className="container d-flex align-items-center">
                <div className="row d-flex justify-content-center">
                    <div className="col-12 col-lg-6">
                        <LoginForm onLogin={this.handleOnLogin}
                            onForgotPassword={() => { this.setState({ showForgotPasswordModal: true }); } }
                            onResendActivation={() => { this.setState({ showResendActivationModal: true }); } }/>
                    </div>
                </div>
            </div>

            <ResendActivationModal show={this.state.showResendActivationModal} enabled onClose={this.closeResendActivationModal}/>
            <ForgotPasswordModal show={this.state.showForgotPasswordModal} enabled onClose={this.closeForgotPasswordModal}/>
        </div>
    );
}

const Navbar = withRouter(
({ history, onLogout }) => {
    return (
        <nav className="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
            <a className="navbar-brand col-sm-3 col-md-2 mr-0" href="#">MANA</a>
            <ul className="navbar-nav px-3">
                {UserDAO.isLoggedIn &&
                <li className="nav-item text-nowrap">
                    <LinkButton className="nav-link" onClick={() => {
                        onLogout(() => { history.push("/"); console.log(history); })
                    }} href="#">Log out</LinkButton>
                </li>}
            </ul>
        </nav>
    );
}
);

构造函数（道具）{
超级（道具）；
此.state={
页面：“登录”
}
this.handleOnLogout=this.handleOnLogout.bind（this）；
}
手动注销（回调）{
UserDAO.logout（）。然后（（）=>{
回调（）；
}).catch（错误=>console.log（错误））；
}
render（）{
返回(
);
}
函数privaterout（{component:component，…rest}）{
返回(
UserDAO.isLoggedIn(
) : (
)
}
/>
)
}

LoginPage.js

constructor(props) {
    super(props);

    this.state = {
        page: 'login'
    }

    this.handleOnLogout = this.handleOnLogout.bind(this);
}

handleOnLogout(callback) {
    UserDAO.logout().then(() => {
        callback();
    }).catch(error => console.log(error));
}

render() {
    return (
        <Router>
            <div>
                <Navbar onLogout={this.handleOnLogout}/>
                <Switch>
                    <Route path="/login" component={LoginPage} />
                    <PrivateRoute path="/" component={Dashboard}/>
                </Switch>
            </div>
        </Router>
    );
}

function PrivateRoute({ component: Component, ...rest }) {
return (
    <Route
        {...rest}
        render={props => 
            UserDAO.isLoggedIn ? (
                <Component {...props}/>
            ) : (
                <Redirect
                to={{
                    pathname: "/login",
                    state: { from: props.location }
                }}
                />
            )
        }
    />
)
}

handleOnLogin(email, password, positive, negative) {
    let self = this;
    UserDAO.login(email, password).then(user => {
        console.log("Successfully logged in as user #" + user.id);
        positive("Successfully logged in, you'll be soon redirected to the homepage.");
        setTimeout(() => { self.setState({redirectToReferrer: true }) }, 500 );
    }).catch( error => {
        console.log("Error logging in with email/password auth: " + error);
        negative("Error logging in with email/password auth: " + error);
    });
}

render() {
    const { from } = this.props.location.state || { from: { pathname: "/" } };
    const { redirectToReferrer } = this.state;

    if (UserDAO.isLoggedIn || redirectToReferrer) return <Redirect to={from} />;

    return (
        <div className="login-page">
            <div className="container d-flex align-items-center">
                <div className="row d-flex justify-content-center">
                    <div className="col-12 col-lg-6">
                        <LoginForm onLogin={this.handleOnLogin}
                            onForgotPassword={() => { this.setState({ showForgotPasswordModal: true }); } }
                            onResendActivation={() => { this.setState({ showResendActivationModal: true }); } }/>
                    </div>
                </div>
            </div>

            <ResendActivationModal show={this.state.showResendActivationModal} enabled onClose={this.closeResendActivationModal}/>
            <ForgotPasswordModal show={this.state.showForgotPasswordModal} enabled onClose={this.closeForgotPasswordModal}/>
        </div>
    );
}

const Navbar = withRouter(
({ history, onLogout }) => {
    return (
        <nav className="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
            <a className="navbar-brand col-sm-3 col-md-2 mr-0" href="#">MANA</a>
            <ul className="navbar-nav px-3">
                {UserDAO.isLoggedIn &&
                <li className="nav-item text-nowrap">
                    <LinkButton className="nav-link" onClick={() => {
                        onLogout(() => { history.push("/"); console.log(history); })
                    }} href="#">Log out</LinkButton>
                </li>}
            </ul>
        </nav>
    );
}
);

handleon登录（电子邮件、密码、肯定、否定）{
让自我=这个；
UserDAO.login（电子邮件、密码）。然后（用户=>{
console.log（“以用户#“+user.id成功登录”）；
肯定（“成功登录，您将很快重定向到主页。”）；
setTimeout（（）=>{self.setState（{redirectToReferrer:true}}），500；
}).catch（错误=>{
console.log（“使用电子邮件/密码身份验证登录时出错：+错误”）；
否定（“使用电子邮件/密码身份验证登录时出错：+错误”）；
});
}
render（）{
const{from}=this.props.location.state | |{from:{pathname:“/”}；
const{redirectToReferrer}=this.state；
if（UserDAO.isLoggedIn | | redirectToReferrer）返回；
返回(
{this.setState（{showForgotPasswordModal:true}）；}
onResendActivation={（）=>{this.setState（{showresendactivationmodel:true}）；}}}/>
);
}

Navbar.js

constructor(props) {
    super(props);

    this.state = {
        page: 'login'
    }

    this.handleOnLogout = this.handleOnLogout.bind(this);
}

handleOnLogout(callback) {
    UserDAO.logout().then(() => {
        callback();
    }).catch(error => console.log(error));
}

render() {
    return (
        <Router>
            <div>
                <Navbar onLogout={this.handleOnLogout}/>
                <Switch>
                    <Route path="/login" component={LoginPage} />
                    <PrivateRoute path="/" component={Dashboard}/>
                </Switch>
            </div>
        </Router>
    );
}

function PrivateRoute({ component: Component, ...rest }) {
return (
    <Route
        {...rest}
        render={props => 
            UserDAO.isLoggedIn ? (
                <Component {...props}/>
            ) : (
                <Redirect
                to={{
                    pathname: "/login",
                    state: { from: props.location }
                }}
                />
            )
        }
    />
)
}

handleOnLogin(email, password, positive, negative) {
    let self = this;
    UserDAO.login(email, password).then(user => {
        console.log("Successfully logged in as user #" + user.id);
        positive("Successfully logged in, you'll be soon redirected to the homepage.");
        setTimeout(() => { self.setState({redirectToReferrer: true }) }, 500 );
    }).catch( error => {
        console.log("Error logging in with email/password auth: " + error);
        negative("Error logging in with email/password auth: " + error);
    });
}

render() {
    const { from } = this.props.location.state || { from: { pathname: "/" } };
    const { redirectToReferrer } = this.state;

    if (UserDAO.isLoggedIn || redirectToReferrer) return <Redirect to={from} />;

    return (
        <div className="login-page">
            <div className="container d-flex align-items-center">
                <div className="row d-flex justify-content-center">
                    <div className="col-12 col-lg-6">
                        <LoginForm onLogin={this.handleOnLogin}
                            onForgotPassword={() => { this.setState({ showForgotPasswordModal: true }); } }
                            onResendActivation={() => { this.setState({ showResendActivationModal: true }); } }/>
                    </div>
                </div>
            </div>

            <ResendActivationModal show={this.state.showResendActivationModal} enabled onClose={this.closeResendActivationModal}/>
            <ForgotPasswordModal show={this.state.showForgotPasswordModal} enabled onClose={this.closeForgotPasswordModal}/>
        </div>
    );
}

const Navbar = withRouter(
({ history, onLogout }) => {
    return (
        <nav className="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
            <a className="navbar-brand col-sm-3 col-md-2 mr-0" href="#">MANA</a>
            <ul className="navbar-nav px-3">
                {UserDAO.isLoggedIn &&
                <li className="nav-item text-nowrap">
                    <LinkButton className="nav-link" onClick={() => {
                        onLogout(() => { history.push("/"); console.log(history); })
                    }} href="#">Log out</LinkButton>
                </li>}
            </ul>
        </nav>
    );
}
);

const Navbar=withRouter(
（{history，onLogout}）=>{
返回(

{UserDAO.isLoggedIn&&

{
onLogout（（）=>{history.push（“/”）；console.log（history）；}）
}}href=“#”>注销
}

);
}
);

UserDAO维护auth变量及其方法返回登录和注销承诺（我使用的是MongoDB浏览器SDK）

登录和注销方法都在工作：登录后，如果我刷新页面，它将加载私有路由，在注销时钟->刷新->之后，我将获得登录页面。我希望它在不手动刷新的情况下执行此操作

我想遵循一个好的设计指南，但它几乎与相同，但不起作用

编辑 我在

LoginPage

中的

之前添加了一些日志记录，用于@c-chavez的评论，我得到了以下信息：

不知道为什么会打印两次。

尝试更改此选项：

<PrivateRoute path="/" component={Dashboard}/>

确保

此.props.location.state

存在。它应该是您当前的路径，我想是

'/login'

。由于它将在您登录（由路由器处理）后再次尝试重定向到

“/login”

，因此您呈现相同的页面，从而呈现第二条消息，并将两个变量设置为

false

---

我不太相信

DAO

你必须处理应用程序中用户的状态。我会使用Cookie、session、redux，或者肯定会使用的东西。

这都是我的错误：

在我的UserDAO库中，我以以下方式导出了一个变量：

export var isLoggedIn = client.auth.isLoggedIn

因此，它总是返回与导入库时相同的变量值

但我希望每次都能更新，所以我将其更改为：

export function isLoggedIn() {
    return client.auth.isLoggedIn;
}

而且它有效

谢谢大家。

---

可以用我的设计方式再次回答并更正所有问题。

一旦登录完成，并且您的状态已更新，您能否在执行重定向之前，在

render（）

函数中打印

UserDAO.isLoggedIn

和

redirectoreferer

值是什么？