Add two HOC component in <Switch/> not work - reactjs

Question

I try to put 2 HOC in switch but, only routers in first be called, the second is not called.
// 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 };
And the Switch part:
<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>
If I input /localhost:3000/switch-role to browser, child page can show up correctly, but if I input /localhost:3000/user-list, I see a black page. if I remove AuthWithoutLayout part, the user-list page will show up.
Please help.

Answer 1

Switch
Renders the first child <Route> or <Redirect> that matches the location.
BTW, neither of those are Higher Order Components, but rather they are simple wrapper components. You can correct your Auth component, but your AuthWithoutLayout is a layout container and better suited to decorate anything other than a route or redirect.
Basically in your "auth" component you want to check some authentication condition and if authenticated render the Route, otherwise you redirect the user where you want them, usually the login path.
Your containers should also apply the Single Responsibility Principle, meaning an auth container should only concern itself with authentication, and a layout container should only concern itself with content layout.
Here's a sample auth route rewrite
// 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="/" />;
}
}
Usage:
<ConfigProvider locale={locale}>
<Switch>
<Route exact path="/" component={Login} />
<AuthRoute path="/switch-role" component={SwitchRole} />
<AuthRoute path="/user-list" component={UserList} /> // <-- use a layout container to decorate UserList!
</Switch>
</ConfigProvider>

Answer 2

The problem with above code is that Switch renders the First match component. So when you render AuthWithoutLayout without a Route, it assumes that this is the component that needs to be rendered and will not check any further and hence Auth is ignored
The solution is to write AuthWithoutLayout and Auth both with Routes
<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>