In this case, you should only have one <Switch> on this page. So, since Login doesn’t require <MainTemplate>, this should be moved into a new component. Then, link to that component it’s own <Route> (Aafter login) as a “catch all” for path="/".

Then, in your new page you made for the Main page, you can use the subroutes you have on that page.

Updated Page

  return (
    <Provider store={store}>
      <BrowserRouter>

        // Different page for login without MainTemplate UI
        <Switch>
          <Route strict exact path="/login" component={LoginPage} />
          <Route path="/" component={MainPage} />
        </Switch>


      </BrowserRouter>
    </Provider>
  );

New “main-page.component.jsx

        <MainTemplate>
          <MenuSidebar />
          <NextMeet />
          <Suspense
            fallback={
              <div style={{width: '100%', height: '100%', justifyContent: 'center', alignItems: 'center'}}>
                <h1>Ładowanie...</h1>
              </div>
            }
          >
            // Main Switch for the rest of an app
            <Switch>
              <PrivateRoute exact path={routes.home} component={Home} />
              <PrivateRoute exact strict path={routes.timetable} component={Timetable} />
              <PrivateRoute exact strict path={routes.topicDatabase} component={TopicDatabase} />
              <PrivateRoute exact strict path={routes.history} component={History} />
              <PrivateRoute exact strict path={routes.account} component={Account} />
            </Switch>
          </Suspense>
        </MainTemplate>

I have created two different Switch from react-router-dom. One main Switch have all main Routes with MainTemplate and now I want to add different Route without this MainTemplate to have blank page. Is there any way to do this with React Router Dom ?

return (
    <Provider store={store}>
      <BrowserRouter>

        // Different page for login without MainTemplate UI
        <Switch>
          <Route strict exact path="/login" component={LoginPage} />
        </Switch>

        <MainTemplate>
          <MenuSidebar />
          <NextMeet />
          <Suspense
            fallback={
              <div style={{width: '100%', height: '100%', justifyContent: 'center', alignItems: 'center'}}>
                <h1>Ładowanie...</h1>
              </div>
            }
          >
            // Main Switch for the rest of an app
            <Switch>
              <PrivateRoute exact path={routes.home} component={Home} />
              <PrivateRoute exact strict path={routes.timetable} component={Timetable} />
              <PrivateRoute exact strict path={routes.topicDatabase} component={TopicDatabase} />
              <PrivateRoute exact strict path={routes.history} component={History} />
              <PrivateRoute exact strict path={routes.account} component={Account} />
            </Switch>
          </Suspense>
        </MainTemplate>
      </BrowserRouter>
    </Provider>
  );

For now when I go to '/login I see LoginPage component and also MainTemplate, MenuSidebar and NextMeet components