added protected for routes, catching errors

src/App.tsx

@@ -1,6 +1,6 @@
 import "./App.css";
 import { useEffect, useState } from "react";
-import { Route, Switch, useHistory } from "react-router-dom";
+import { Redirect, Route, Switch, useHistory } from "react-router-dom";
 
 import { Header } from "./components/header/header";
 import { Demos } from "./components/demos/demos";
@@ -25,13 +25,16 @@ const App: React.FC<any> = () => {
   const history = useHistory();
   const { handleCurrentCard } = cardSlice.actions;
   const { handleChangeLanguage } = languageSlice.actions;
-  const { cards } = useAppSelector((state) => state.cardReducer);
+  const { cards, currentCard } = useAppSelector((state) => state.cardReducer);
+  const { data } = useAppSelector((state) => state.sessionReducer)
+
 
   useEffect(() => {
     dispatch(fetchCards());
     dispatch(handleChangeLanguage(cookies.get("i18next")));
   }, []);
 
+
   const handleCards = (card: ICards) => {
     dispatch(handleCurrentCard(card));
     history.push("/connect-page");
@@ -50,7 +53,7 @@ const App: React.FC<any> = () => {
         <div className="main">
           <h3 className="demos__tittle">{t("demo-title")}</h3>
           <div className="demo__container">
-            {cards.map((i: any) => (
+            {cards.map((i: ICards) => (
               <Demos
                 onClick={() => handleCards(i)}
                 key={i._id}
@@ -61,20 +64,23 @@ const App: React.FC<any> = () => {
         </div>
       </Route>
       <Route path="/connect-page">
-        <div className="background">
-          <div className="blur">
-            <Header></Header>
-            <div className="content__container">
-              <Main visible={visible} setVisible={setVisible}></Main>
+        {currentCard ?
+          (<div className="background">
+            <div className="blur">
+              <Header></Header>
+              <div className="content__container">
+                <Main visible={visible} setVisible={setVisible}></Main>
+              </div>
             </div>
           </div>
-        </div>
+          ) : <Redirect to='/' />}
       </Route>
       <Route exact path="/stream/:id">
-        <PlayerComponent
+        {data ? (<PlayerComponent
           dispatch={dispatch}
           closeStream={closeStream}
         ></PlayerComponent>
+        ) : <Redirect to='/' />}
       </Route>
     </Switch>
   );