Reactjs 在<；开关/>；不行

我尝试在交换机中加入2个HOC，但只调用第一个中的路由器，而不调用第二个中的路由器

 // if user is not login, show login page, otherwise add a side bar to children and show up    
    @inject("userStore")
    @observer
    class Auth extends React.Component {
      render() {
        let { userStore, children } = this.props;
        return userStore.isLogin ? <CoreLayout>{children}</CoreLayout> : <Login />;
      }
    }

    // if user is not login, show login page, otherwise show children
    @inject("userStore")
    @observer
    class AuthWithoutLayout extends React.Component {
      render() {
        let { userStore, children } = this.props;
        return userStore.isLogin ? children : <Login />;
      }
    }
    export { Auth, AuthWithoutLayout };

//如果用户未登录，则显示登录页面，否则为子项添加侧栏并显示
@注入（“用户存储”）
@观察者
类Auth扩展了React.Component{
render（）{
让{userStore，children}=this.props；
返回userStore.isLogin？{children}：；
}
}
//若用户未登录，则显示登录页面，否则显示子项
@注入（“用户存储”）
@观察者
类authWithOutloyout扩展了React.Component{
render（）{
让{userStore，children}=this.props；
返回userStore.isLogin？子项：；
}
}
导出{Auth，authWithOutloyout}；

以及开关部分：

    <ConfigProvider locale={locale}>
        <Switch>
          <Route exact path="/" component={Login} />
          <AuthWithoutLayout>
             <Route path="/switch-role" component={SwitchRole} />
          </AuthWithoutLayout> 
          <Auth>
              <Route path="/user-list" component={UserList} />
          </Auth>
        </Switch>
   </ConfigProvider>

若我输入/localhost:3000/将角色切换到浏览器，子页面可以正确显示，但若我输入/localhost:3000/用户列表，我会看到一个黑色页面。如果我删除authWithOutloyout部分，将显示用户列表页面

---

请提供帮助。

上述代码的问题是开关呈现第一个匹配组件。因此，当您在没有路由的情况下渲染

AuthWithoutLayout

时，它假定这是需要渲染的组件，并且不会进一步检查，因此

Auth

将被忽略

解决方案是使用路由写入

authWithOutloyout

和

Auth

<ConfigProvider locale={locale}>
        <Switch>
          <Route exact path="/" component={Login} />
          <Route path="/switch-role">
              <AuthWithoutLayout>
                   <SwitchRole />
              </AuthWithoutLayout> 
          </Route>
          <Route path="/user-list">
              <Auth>
                   <UserList />
              </Auth> 
          </Route>
        </Switch>
   </ConfigProvider>

---

上述代码的问题是，Switch呈现第一个匹配组件。因此，当您在没有路由的情况下渲染

AuthWithoutLayout

时，它假定这是需要渲染的组件，并且不会进一步检查，因此

Auth

将被忽略

解决方案是使用路由写入

authWithOutloyout

和

Auth

<ConfigProvider locale={locale}>
        <Switch>
          <Route exact path="/" component={Login} />
          <Route path="/switch-role">
              <AuthWithoutLayout>
                   <SwitchRole />
              </AuthWithoutLayout> 
          </Route>
          <Route path="/user-list">
              <Auth>
                   <UserList />
              </Auth> 
          </Route>
        </Switch>
   </ConfigProvider>

呈现与位置匹配的第一个子项

或

顺便说一句，它们都不是高阶组件，而是简单的包装器组件。您可以更正

Auth

组件，但您的

authWithOutloyout

是一个布局容器，更适合装饰除路由或重定向之外的任何内容

基本上，在“auth”组件中，您希望检查一些身份验证条件，如果经过身份验证，则呈现

路由

，否则将用户重定向到您想要的位置，通常是登录路径

您的容器还应该应用单一责任原则，这意味着auth容器应该只关注身份验证，布局容器应该只关注内容布局

下面是一个验证路由重写示例

// if user is logged in, render Route, otherwise Redirect to login "/"
@inject("userStore")
@observer
class AuthRoute extends Component {
  render() {
    const { userStore, ...props } = this.props;
    return userStore.isLogin ? <Route {...props} : <Redirect to="/" />;
  }
}

//如果用户已登录，则渲染路由，否则重定向到登录“/”
@注入（“用户存储”）
@观察者
类AuthRoute扩展组件{
render（）{
const{userStore，…props}=this.props；
返回userStore.isLogin？

呈现与位置匹配的第一个子项
或

顺便说一句，这两个组件都不是高阶组件，而是简单的包装组件。您可以更正
Auth
组件，但您的
AuthWithoutLayout
是一个布局容器，更适合装饰除路由或重定向之外的任何内容

基本上，在“auth”组件中，您希望检查一些身份验证条件，如果经过身份验证，则呈现
路由
，否则将用户重定向到您想要的位置，通常是登录路径

您的容器还应该应用单一责任原则，这意味着auth容器应该只关注身份验证，布局容器应该只关注内容布局

下面是一个验证路由重写示例

// if user is logged in, render Route, otherwise Redirect to login "/"
@inject("userStore")
@observer
class AuthRoute extends Component {
  render() {
    const { userStore, ...props } = this.props;
    return userStore.isLogin ? <Route {...props} : <Redirect to="/" />;
  }
}

//如果用户已登录，则渲染路由，否则重定向到登录“/”
@注入（“用户存储”）
@观察者
类AuthRoute扩展组件{
render（）{
const{userStore，…props}=this.props；
返回userStore.isLogin？