React Router не перенаправляет при входе и выходе

Question

У меня всего несколько дней знаний о React Router, и я пытаюсь заставить его работать, но, очевидно, я что-то упускаю. Я следовал учебнику на документах, но я схожу с ума от этого.

Это мои занятия:

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 }
                }}
                />
            )
        }
    />
)
}

LoginPage.js

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>
    );
}

Navbar.js

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>
    );
}
);

UserDAO поддерживает переменные auth, а его методы возвращают обещания для входа в систему и выхода из системы (если это может помочь, я использую MongoDB Stitch Browser SDK).

Методы входа в систему и выхода из системы работают: после входа в систему, если я обновляю страницу, она загружает приватный маршрут, после часов выхода из системы -> обновить -> затем я получаю страницу входа. Я хочу сделать это без обновления вручную.

Я хочу следовать хорошему руководству по дизайну, но оно почти идентично официальному учебнику , но оно не работает.

Я не могу понять это, пожалуйста, помогите мне.

РЕДАКТИРОВАНИЕ:

Я добавил некоторые записи перед <Redirect/> в LoginPage для комментария @ c-chavez, и он дошел до меня так:

Не знаю, почему печатается дважды.

Answer 1

Это была моя ошибка:

в моей библиотеке UserDAO я экспортировал переменную следующим образом:

export var isLoggedIn = client.auth.isLoggedIn

, поэтому он всегда возвращает то же значение переменной, которое было при импорте библиотеки.

Но я хочу, чтобы он обновлялся каждый раз, поэтому я изменил его на:

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

И это работает!

Спасибо всем. Не стесняйтесь отвечать снова и исправлять все по-моему.

Answer 2

Попробуйте изменить это:

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

В

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

И вы можете Перенаправить так:

if (UserDAO.isLoggedIn || redirectToReferrer) return <Redirect to='dashboard' />;

На этот вопрос:

Не знаю, почему печатается дважды.

Дело в том, когда вы делаете это:

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

наверняка this.props.location.state существует. Это должен быть ваш текущий путь, который я представляю '/login'. Поскольку он попытается перенаправить на '/login' еще раз после входа в систему (который обрабатывается вашим маршрутизатором), вы рендерите ту же страницу и, таким образом, отобразите второе сообщение с обеими переменными, установленными на false.

Я бы не сильно поверил в то, что DAO вы должны обрабатывать состояние пользователя в приложении. Я бы использовал куки, сессию, редукс или что-то, что делает это наверняка.