Javascript React路由器组件没有'；无法加载，但已成功重定向

我正在使用React Router v5.2.0，并使用异步身份验证实现公共/私有路由。 工作流程基本上是： 用于登录的PublicRoute， 仪表板专用路线 和用于/登录的PublicRoute（因此，如果用户已登录，但未订阅服务，则会重定向到登录页）

除了“/着陆”之外，我的所有路线都有效 应用程序将成功重定向到/landing，但landing组件不显示/mount。（console.log也不会触发）

我正在使用redux，并尝试添加withRouter，但收到相同的错误。 如果删除公用或专用路由组件并使用常规路由，则该组件将显示

App.js

<BrowserRouter>
  
    <Switch>

      <PrivateRoute exact path="/" component={Dashboard} />
      <PublicRoute exact restricted={true} path="/landing" component={Landing} />
      <PublicRoute exact restricted={false} path="/login" component={Login} />
    </Switch>
  
</BrowserRouter>

公共路线：

class PublicRoute extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: true,
            isAuthenticated: false,
            isSubscribed: false
        };
    }


    async componentDidMount() {
        console.log("loading");

        const isLoginCheck = await isLogin();
        const isSubscribedCheck = await isSubscribed();

        this.setState({
            loading: false,
            isAuthenticated: isLoginCheck || false,
            isSubscribed: isSubscribedCheck || false
        })

    }

    render() {
        const { component: Component, restricted, ...rest } = this.props;
        return (
            <Route
                {...rest}
                render={props => (
                    //If a user is authenticated, subscribed and the route is restricted, redirect to dashboard
                    this.state.isAuthenticated && this.state.isSubscribed && restricted ? (
                        <Redirect to="/" />
                    ) : this.state.loading ? (
                        //If loading, show a loading component (placeholder currently)
                        <div>LOADING</div>
                    ) : this.state.isAuthenticated && (!this.state.isSubscribed) ? (
                        //If the user is authenticated, but not subscribed. redirect to landing
                        <Redirect to="/landing" />
                        
                    ) :
                                (
                                    //Else redirect to the component.
                                    <Component {...props} />
                                ))

                }
            />
        );
    }
}

export default PublicRoute;

   class Landing extends React.Component {

    componentDidMount() {
        console.log('component mounted');
    }
    render() {
        console.log('Component was called');
        return (
            <h1>Landing page - not a valid subscriber. </h1>
        )
    }
}


export default Landing;

类PublicRoute扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
加载：对，
I认证：错误，
已订阅：错误
};
}
异步组件didmount（）{
控制台日志（“加载”）；
const isLoginCheck=等待isLogin（）；
const isSubscribedCheck=等待isSubscribed（）；
这是我的国家({
加载：false，
IsAuthentication:isLoginCheck | | |假，
isSubscribed:isSubscribedCheck | | false
})
}
render（）{
const{component:component，rest}=this.props；
返回(
(
//如果用户经过身份验证、已订阅且路由受到限制，请重定向到仪表板
this.state.isAuthenticated&&this.state.isSubscribed&&restricted(
)：this.state.loading(
//如果正在加载，则显示正在加载的组件（当前为占位符）
加载
)：this.state.isAuthenticated&（！this.state.isSubscribed）(
//如果用户已通过身份验证，但未订阅。重定向到登录
) :
(
//否则重定向到组件。
))
}
/>
);
}
}
导出默认公共路径；

登陆：

class PublicRoute extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: true,
            isAuthenticated: false,
            isSubscribed: false
        };
    }


    async componentDidMount() {
        console.log("loading");

        const isLoginCheck = await isLogin();
        const isSubscribedCheck = await isSubscribed();

        this.setState({
            loading: false,
            isAuthenticated: isLoginCheck || false,
            isSubscribed: isSubscribedCheck || false
        })

    }

    render() {
        const { component: Component, restricted, ...rest } = this.props;
        return (
            <Route
                {...rest}
                render={props => (
                    //If a user is authenticated, subscribed and the route is restricted, redirect to dashboard
                    this.state.isAuthenticated && this.state.isSubscribed && restricted ? (
                        <Redirect to="/" />
                    ) : this.state.loading ? (
                        //If loading, show a loading component (placeholder currently)
                        <div>LOADING</div>
                    ) : this.state.isAuthenticated && (!this.state.isSubscribed) ? (
                        //If the user is authenticated, but not subscribed. redirect to landing
                        <Redirect to="/landing" />
                        
                    ) :
                                (
                                    //Else redirect to the component.
                                    <Component {...props} />
                                ))

                }
            />
        );
    }
}

export default PublicRoute;

   class Landing extends React.Component {

    componentDidMount() {
        console.log('component mounted');
    }
    render() {
        console.log('Component was called');
        return (
            <h1>Landing page - not a valid subscriber. </h1>
        )
    }
}


export default Landing;

类登录扩展了React.Component{
componentDidMount（）{
console.log（“组件安装”）；
}
render（）{
log（'调用了组件'）；
返回(
登录页-不是有效的订阅者。
)
}
}
导出默认着陆；

谢谢