Как перенаправить с помощью реактивного маршрутизатора

Превышена максимальная глубина обновления. Это может произойти, когда компонент неоднократно вызывает setState внутри componentWillUpdate или componentDidUpdate. React ограничивает количество вложенных обновлений, чтобы предотвратить бесконечные циклы.

  import React, { Component } from "react";
  import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom"; 
  import Login from "./component/auth/Login";
  import HomeScreen from "./component/home-screen/HomeScreen";
       class App extends Component {
           constructor(props) {
            super(props);

              this.state = {
                   user: {}
                 };
                 }

              componentDidMount() {
                    this.authListener();
               }

     authListener() {
firebase.auth().onAuthStateChanged(user => {
  if (user) {
    this.setState({ user });
  } else {
    this.setState({ user: null });
  }
});
}

render() {
  return (
  <BrowserRouter>
    <div className = "App">
      <Switch>
        <Route exact path = "/" component = {Landing} />
        {this.state.user ? (
          <Redirect to = "/homescreen" />
        ) : (
          <Redirect to = "/login" />
        )}
        <Route exact path = "/login" component = {Login} />
        <Route exact path = "/homescreen" component = {HomeScreen} />
        <Route exact path = "/users" component = {Users} />
        <Route exact path = "/users/:id" component = {UserDetail} />
        <Route component = {Error} />
      </Switch>
    </div>
  </BrowserRouter>
);
}
}

 export default App;

вы получаете какие-либо ошибки?

— 30.05.2019 09:41

да я пишу ошибку сверху перед кодом

— 30.05.2019 09:43

Превышена максимальная глубина обновления. Это может произойти, когда компонент неоднократно вызывает setState внутри componentWillUpdate или componentDidUpdate. React ограничивает количество вложенных обновлений, чтобы предотвратить бесконечные циклы.

— 30.05.2019 09:43

Ваш логин перенаправления неверен... пустой объект оценивается как true, попробуйте установить user:null в конструкторе() вместо пустого объекта

— 30.05.2019 09:49

какая версия реактивного маршрутизатора?

— 30.05.2019 09:53

"реакция-маршрутизатор-дом": "^ 5.0.0"

— 30.05.2019 10:19

та же ошибка, когда я устанавливаю пользователя null в конструкторе

— 30.05.2019 10:22

reactjs firebase react-router

30.05.2019 09:36

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

583

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

React Router v4+ поддерживает использование PrivateRoute.

// create a private route, if user is not logged in redirect to login page
const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render = {(props) => (
      isAuthenticated() === true
        ? <Component {...props} />
        : <Redirect to='/login' />
  )} />
)

Используйте его как обычный маршрут и проверьте аутентификацию на частном маршруте.

<BrowserRouter>
  <Route path = "/login" exact component = {FormularAuth} />
  <PrivateRoute path='/private' component = {Private} />
</BrowserRouter>

Демо

я не знаю, как мы можем это сделать

— 30.05.2019 11:23

да, методом защищенного маршрута

— 31.05.2019 13:31

30.05.2019 10:23

//App.js 
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: ""
    };
  }

  componentDidMount() {
    this.authListener();
  }

  authListener() {
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        this.setState({
          user
        });
      } else {
        this.setState({
          user: null
        });
      }
    });
  }

  render() {
    return (
    <BrowserRouter>
    <div className = "App">
      <Switch>
        <Route exact path = "/" component = {(props)=><Landing {...props} users = {this.state.user}/>}/>
        <Route exact path = "/login" component = {Login} />
        <Route exact path = "/homescreen" component = {HomeScreen} />
      </Switch>
    </div>
  </BrowserRouter>
    );
  }
}

export default App;

в вашем посадочном компоненте проверьте значение пользователя и перейдите к соответствующим маршрутам.

//Landing.js
class Landing extends Component {
  componentDidMount() {
    if (this.props.users) {
      this.props.history.push("homescreen")
    } else if (this.props.users === null) {
      this.props.history.push("login")
    }
  }
  render() {
    return (
      <div>
        <h1>landing page</h1>
      </div>
    );
  }
}

спасибо за решение ошибки ответа используйте privateRoute для перенаправления еще раз спасибо

— 31.05.2019 11:59

30.05.2019 12:20