React Router продолжает отображать неверную страницу

Question

Были на этом все выходные.После обновления страницы 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')
    }
}

Я не получаю никаких ошибок - Функциональность немного отключена

Answer 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")
);

---

Для всех, кто использует реактив-маршрутизатор 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")
);