Попытка реализовать утилиты 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 = {() => ...}
Однако это также заканчивается той же ошибкой. Нарушение инварианта: недопустимый тип элемента: ожидалась строка ..... но получено: не определено
Привет. Я попробовал этот сценарий, и он не работает. Если я добавлю <Route {...children} /> в условиях загрузки, он будет работать как положено.





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