Route.render(): должен быть возвращен действительный элемент React (или нуль).

Я получаю следующие ошибки, хотя я возвращаю один корневой элемент:

Route.render(): должен быть возвращен действительный элемент React (или null). Возможно, вы вернули undefined, массив или другой недопустимый объект.

диспетчеризация не является функцией

Мой код:

export var PrivateRoute = ({ component: Component, ...rest }) => {

  return (
    <Route {...rest} render={props => {
    firebase.auth().onAuthStateChanged((user) => {
      if(user) {
        console.log('ON...ON');
        var {dispatch} = props;
        dispatch(actions.login(user.uid));
        dispatch(actions.startAddTodos());
        return(
          <Component  {...props} />
        ) ;

      } else {
        console.log('OFF...OFF');

        dispatch(actions.logout());

        return (
          <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
        );

      }
    });
  }} />);
}
export default Redux.connect()(PrivateRoute);

Ссылка на Github


reactjs redux react-redux react-router react-router-v4
person Anyname Donotcare    schedule 21.10.2017    source источник
comment
Ваш возврат находится внутри асинхронного обратного вызова, а не прямого возврата к функции, которая принимает props в качестве аргумента.   -  person banna    schedule 22.10.2017
comment
@MohammadElbanna : Спасибо, не могли бы вы предложить решение проблемы, пожалуйста.   -  person Anyname Donotcare    schedule 22.10.2017
comment
Я разместил предложение, чтобы исправить это. Надеюсь, что это работает!   -  person banna    schedule 22.10.2017

Ответы (1)


arrow_upward
2
arrow_downward

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

Я думаю, что ваш компонент должен иметь состояние isLoading, чтобы показывать пользователю что-то до завершения операции аутентификации. Когда isLoading истинно, вы должны показать индикатор загрузки, иначе вы должны показать свои другие компоненты, связанные с успехом или неудачей аутентификации.

Вы также должны определить состояние для успешной или неудачной аутентификации.

Примечание. Я собираюсь использовать систему состояний компонентов реакции вместо Redux, потому что я мало знаю о вашем дереве состояний redux. Не стесняйтесь пытаться преобразовать это в Redux

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

class UserAuth extends Component {
  state = {
    isLoading: true
    isUserAuth: false
  }

  componentDidMount() {
    firebase.auth().onAuthStateChanged((user) => {
      if(user) {
        this.setState({isLoading: false, isUserAuth: true})
        // the rest of your logic here
      }
      else {
        this.setState({isLoading: false, isUserAuth: false})
        // the rest of your logic here
      }
  }

  render() {
    return (
      {this.state.isLoading && <LoadingIndicator /> }
      {!this.state.isLoading && this.state.isUserAuth && <Component  {...this.props} />}
      {!this.state.isLoading && !this.state.isUserAuth && <Redirect to={{ pathname: '/login', state: { from: this.props.location } }} />}
    );

  }
}

Во-вторых, в вашем компоненте <Route> вы должны сделать что-то вроде:

<Route {...rest} render={props => (<UserAuth {...props} />)} />
person banna    schedule 21.10.2017
comment
ميرسي خالص يامحمد، أنا لسه جديد في الموضوع ففي حاجات كتير مش واضحة بالنسبالي ، كنت بتمنى يكون التعديل على نفس المثال، لان ال Router V4 مختلف تماما فحسب الاقتراحات اطلب اني اعمل Redirect Component في اللينك دا stackoverflow.com/a/46799951/418343 وحضرتك بتقولي اعمل Новый компонент! فانا شايف كدا الدنيا بتتعقد. - person Anyname Donotcare; 22.10.2017
comment
العفو мотрять на Я сказал, что вы не можете вернуть пользовательский интерфейс из асинхронного обратного вызова. Вы создаете свой компонент на лету (и передаете его в свойство рендеринга), и я просто дал ему имя и реорганизовал его код. Обратите внимание, что это React. js, чтобы всегда создавать повторно используемый код с помощью компонентов.И, кстати, компонент PrivateRoute (по ссылке, которую вы разместили) является хорошей абстракцией для безопасных маршрутов. - person banna; 22.10.2017