React Router продолжает отображать неправильную страницу
Был на этом все выходные. После обновления страницы React Router сначала продолжает маршрутизацию на страницу / login, а затем на домашнюю страницу «/».
ReactDOM.render(
<Provider store = {store}>
<Router>
<Switch>
<Route path = "/login" component = {Login} />
<AuthenticatedComponent>
<Header />
<Route path = "/" component = {App} exact />
</AuthenticatedComponent>
</Switch>
</Router>
</Provider>,
document.getElementById("root")
);
Я пробовал перемещаться по маршрутам, но это не сработало - никаких ошибок, просто делает то же самое. Одно я делаю, это говорю. «Если пользователь вошел в систему (нет нуля), немедленно перенаправить его на домашнюю страницу» / ». Это делается в компоненте {Login} и написано ниже:
componentWillReceiveProps(props) {
if (props.user !== null) {
props.history.push('/')
}
}
Это работает как шарм. Проблема в том, что всякий раз, когда я обновляю свой браузер, URL-адрес сразу переходит в / login, а затем в «/», который является домашним. Я добавил обертку AuthenticatedComponent в качестве последнего теста. Я написал в этом компоненте следующее:
componentWillMount(){
if ( this.props.user !== null) {
this.props.history.push('/')
} else {
this.props.history.push('/login')
}
}
Я не получаю ошибок - просто немного не работает функционал
Я собираюсь реализовать это позже, добавив «isAuthenticated», когда я буду обращаться к базе данных.
Я думаю, вы не сохраняете государство? Например, аутентифицированный пользователь и прочитать его при обновлении страницы? В настоящее время у вас есть исходное состояние вашего приложения (например, пользователь не аутентифицирован) при каждом обновлении страницы.
Аутентифицированный пользователь сохраняется в состоянии «пользователь», и я вызываю getUser () на страницах. Что ты посоветуешь?
Итак, перефразируя мой предыдущий комментарий: в базовом приложении для реагирования все (реквизиты, состояние) будут сброшены при обновлении страницы. Это означает, что вам нужно либо сохранять данные, которые вы хотите сохранить при обновлении страницы, например, веб-хранилище или связь с вашим сервером для получения исходных данных при обновлении страницы (текущий аутентифицированный пользователь и т. д.)
Ответы 1
Оберните <Switch> своим <AuthenticatedComponent> (и переместите <Header /> внутрь компонента аутентификации).
Или создайте Компонент HOC Wrapper (модульный и полезный, если некоторые маршруты требуют аутентификации, а некоторые нет).
Рабочий пример: https://codesandbox.io/s/5m2690nn6n
RequireAuth.js
import React, { Component, Fragment } from "react";
import { withRouter } from "react-router";
import Login from "./Login";
import Header from "./Header";
class RequireAuth extends Component {
state = { isAuthenticated: false };
componentDidUpdate = (prevProps, prevState) => {
if (this.props.location.pathname !== prevProps.location.pathname && !this.state.isAuthenticated) {
this.props.history.push("/");
}
};
isAuthed = () => this.setState({ isAuthenticated: true });
unAuth = () => this.setState({ isAuthenticated: false });
render = () => (
!this.state.isAuthenticated
? <Login isAuthed = {this.isAuthed} />
: <Fragment>
<Header unAuth = {this.unAuth} />
{this.props.children}
</Fragment>
);
}
export default withRouter(RequireAuth);
index.js
import React from "react";
import { render } from "react-dom";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import Home from "../components/Home";
import Players from "../components/Players";
import Schedule from "../components/Schedule";
import RequireAuth from "./components/RequireAuth";
import "uikit/dist/css/uikit.min.css";
render(
<BrowserRouter>
<RequireAuth>
<Switch>
<Route exact path = "/" component = {Home} />
<Route exact path = "/players" component = {Players} />
<Route path = "/schedule" component = {Schedule} />
</Switch>
</RequireAuth>
</BrowserRouter>,
document.getElementById("root")
);
Для тех, кто использует response-router v3:
index.js
render (
<Router>
<Route path = "/" component = {RequireAuth}>
<IndexRoute component = {Home} />
<Route path = "players" component = {Players} />
<Route path = "schedule" component = {Schedule} />
</Route>
</Router>, document.getElementById("root")
);
Как вам аутентифицировать пользователя? Я предполагаю, что вы не проверяете удаленный сервер, если пользователь вошел в систему после обновления браузера?