Почему react-router-native не отображает мой компонент?

Попытка реализовать утилиты protectedRoute для реактивного проекта, который в основном ищет JWT. Сначала он показывает индикатор загрузки, и если JWT отсутствует, он перенаправляется на /login.

const LoadingComponent = () => (
  <View>
    <ActivityIndicator/>
  </View>
)

class PrivateRoute extends React.Component {
  state = {
    loading: true,
    jwt: null,
  }
  componentDidMount() {
    storage.retrieve('JWT').then(jwt => this.setState({ loading: false, jwt }))
  }
  render() {
    const { children } = this.props;
    const { jwt, loading } = this.state;
    if (loading) {
      return <Route {...children} component = {LoadingComponent}/>
    }
    if (!jwt) {
      return <Redirect to = "/signup" />;
    }
    return <Route {...children} />
  }
}

export default PrivateRoute;

this.props.children имеет всю необходимую информацию для создания маршрута в приложении. Первоначальная идея заключалась в том, что в случае загрузки мы просто перезапишем this.props.children.component пользовательским загрузочным экраном.

НО решение, которое не дает мне ошибки (только предупреждение):

    if (loading) {
      return LoadingComponent
    }

Я также пытался вручную встроить компонент как

component = {() => <View>{...}</View>

render = {() => ...}

Однако это также заканчивается той же ошибкой. Нарушение инварианта: недопустимый тип элемента: ожидалась строка ..... но получено: не определено

Может быть связано с тем, как вы импортируете PrivateRoute . (если он экспортируется по умолчанию, {} при импорте не требуется)

Eran 03.02.2019 11:20

Привет. Я попробовал этот сценарий, и он не работает. Если я добавлю <Route {...children} /> в условиях загрузки, он будет работать как положено.

kondricz 03.02.2019 11:28
Умерло ли Create-React-App?
Умерло ли Create-React-App?
В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.
Освоение React Native: Пошаговое руководство для начинающих
Освоение React Native: Пошаговое руководство для начинающих
React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...
В чем разница между react native и react ?
В чем разница между react native и react ?
React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...
Хуки React: что это такое и как их использовать
Хуки React: что это такое и как их использовать
Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...
0
2
105
0

Другие вопросы по теме