Question

尝试为react-native项目实现protectedRoute utils，该项目基本上是在寻找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={() => ...}

但是，它也最终以相同的错误出现。不变违规：元素类型无效：应为字符串.....但得到：未定义

为什么react-router-native不呈现我的组件？

0 个答案: