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

@@ -16,6 +16,7 @@ import rootConnector,
 {
   rootProps,
 } from '../../store/rootConnector';
+import { Country } from '../../types';
 
 const useStyles = makeStyles(() => createStyles({
   root: {
@@ -52,9 +53,9 @@ const ImagesGrid: React.FC<rootProps> = (props: rootProps) => {
   return (
     <div className={classes.root}>
       <GridList className={classes.gridList} cols={2.5}>
-        {countries.map((country) => (
+        {countries.map((country: Country) => (
           <GridListTile key={country.pictureURL}>
-            <Link to={`country/${country.id}`}>
+            <Link to={`/country/${country.id}`}>
               <img
                 src={country.pictureURL}
                 alt={t(`${country.id}.name`)}

src/store/rootReducer.ts

@@ -1,9 +1,4 @@
-import { Country } from '../types';
-
-export interface IAppState {
-  lang: 'EN' | 'RU' | 'DE',
-  countries: Country[],
-}
+import { IAppState, RootReducerAction } from './types';
 
 const initialState: IAppState = {
   lang: 'EN',
@@ -55,7 +50,7 @@ const initialState: IAppState = {
   ],
 };
 
-const rootReducer = (state: IAppState = initialState, action: any) => {
+const rootReducer = (state: IAppState = initialState, action: RootReducerAction) => {
   switch (action.type) {
     case 'SET_LANG':
       return { ...state, lang: action.payload.lang };

src/store/types.ts

@@ -0,0 +1,14 @@
+import { Country } from '../types';
+
+export interface IAppState {
+  lang: 'EN' | 'RU' | 'DE',
+  countries: Country[],
+}
+
+export interface RootReducerAction {
+  type: string,
+  payload: {
+    lang?: string,
+    countries?: Country[],
+  }
+}