fix: routing fix

src/components/App.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import {
   BrowserRouter,
-  Redirect,
   Route,
   Switch,
 } from 'react-router-dom';
@@ -37,13 +36,12 @@ const App: React.FC<rootProps> = (props: rootProps) => (
     </Button>
     <BrowserRouter>
       <Switch>
-        <Route path="/countries">
-          <MainPage />
-        </Route>
         <Route path="/country/:countryId">
           <CountryPage />
         </Route>
-        <Redirect path="/" to="/countries" />
+        <Route path="/">
+          <MainPage />
+        </Route>
       </Switch>
     </BrowserRouter>
   </div>

src/components/CountryPage/index.tsx

@@ -5,7 +5,9 @@ import {
 import {
   useParams,
 } from 'react-router-dom';
-import { rootProps } from '../../store/rootConnector';
+import rootConnector, {
+  rootProps,
+} from '../../store/rootConnector';
 import { URLParamTypes } from '../../types';
 
 const CountryPage: React.FC<rootProps> = () => {
@@ -18,4 +20,4 @@ const CountryPage: React.FC<rootProps> = () => {
   return (<div title={t(`${countryId}.name`)}>{t(`${countryId}.name`)}</div>);
 };
 
-export default CountryPage;
+export default rootConnector(CountryPage);

src/components/ImagesGrid/index.tsx

@@ -54,7 +54,7 @@ const ImagesGrid: React.FC<rootProps> = (props: rootProps) => {
       <GridList className={classes.gridList} cols={2.5}>
         {countries.map((country) => (
           <GridListTile key={country.pictureURL}>
-            <Link to={`country/${country.id}`}>
+            <Link to={`/country/${country.id}`}>
               <img
                 src={country.pictureURL}
                 alt={t(`${country.id}.name`)}