Exemplo da forma como pensei em importar os textos

package.json

@@ -8,7 +8,9 @@
     "react": "^16.8.5",
     "react-dom": "^16.8.5",
     "react-icons": "^3.5.0",
-    "react-scripts": "2.1.8"
+    "react-router-dom": "^5.0.0",
+    "react-scripts": "2.1.8",
+    "react-slick": "^0.24.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -5,17 +5,27 @@ import AtHome from "./scenes/teams/athome";
 import Home from "./scenes/home";
 import Header from "./scenes/header";
 import Teams from "./scenes/teams/home";
+import {getSceneLanguage} from "./utils/getSceneLanguage";
+
 
 class App extends Component {
   render() {
     return (
       <div className="App">
         <HashRouter>
-          <Header/>
+          <Route path="/" render={
+              (props) => <Header {...props} />
+          }/>
           <Switch>
-            <Route exact path="/" component={Home}/>
-            <Route exact path="/atHome" component={AtHome}/>
-            <Route exact path="/teams" component={Teams}/>
+            <Route exact path="/" render={
+                (props) => <Home lang={getSceneLanguage(props)} />
+            }/>
+            <Route exact path="/atHome" render={
+                (props) => <AtHome lang={getSceneLanguage(props)} />
+            }/>
+            <Route exact path="/teams" render={
+                (props) => <Teams lang={getSceneLanguage(props)} />
+            }/>
           </Switch>
         </HashRouter>
       </div>

src/scenes/header/index.js

@@ -1,25 +1,40 @@
 import React, { Component } from 'react';
 import brand from '../../images/PQMEC_Logo4.png';
-import { NavLink } from 'react-router-dom';
+import { NavLink, withRouter } from 'react-router-dom';
+import {getLanguageText} from "../../texts";
+import {getSceneLanguage} from "../../utils/getSceneLanguage";
 
 class Header extends Component {
 
   render(){
-    return (<>
+    const lang = getSceneLanguage(this.props);
+    // const {path} = this.props.location.path;
+    const {location:{pathname}} = this.props;
+    return (
       <div className='header-main'>
-        <NavLink to="/" style={{marginRight: 20}}>
+        <NavLink to={this.getToProps("/",lang)} style={{marginRight: 20}}>
           <img
             src={brand}
             height="35"
             alt="Pequi Mecânico"
           />
         </NavLink>
-        <NavLink to="/about" className='header-links'>Sobre Nós</NavLink>
-        <NavLink to="/teams" className='header-links'>Equipes</NavLink>
-        <NavLink to="/contact" className='header-links'>Contato</NavLink>
+        <NavLink to={this.getToProps("/about", lang)} className='header-links'>{getLanguageText("ABOUT_US",lang)}</NavLink>
+        <NavLink to={this.getToProps("/teams", lang)} className='header-links'>{getLanguageText("TEAMS",lang)}</NavLink>
+        <NavLink to={this.getToProps("/contact", lang)} className='header-links'>{getLanguageText("CONTACT",lang)}</NavLink>
+        <div style={{flex: 1}}/>
+        <NavLink to={this.getToProps(pathname, ['en','pt'].find(v => v !== lang))} className='header-links'>{getLanguageText("LANGUAGE",lang)}</NavLink>
       </div>
-    </>)
+    )
   }
+
+  getToProps(path, lang){
+      return {
+          pathname: path,
+          search: `lang=${lang}`
+      };
+  };
+
 }
 
-export default Header;
+export default withRouter(Header);

src/scenes/home/components/carousel.js

@@ -3,6 +3,16 @@ import Carousel from "react-slick";
 
 class Slide extends Component {
 
+  state = {
+    ulHeight:"20px"
+  };
+
+  componentDidMount(){
+    this.setState({
+        ulHeight: this.ulEl.height
+    });
+  }
+
   render(){
     const settings = {
       dots: true,
@@ -12,7 +22,9 @@ class Slide extends Component {
       autoplay: true,
       speed: 2000,
       autoplaySpeed: 5000,
-      cssEase: "linear"
+      cssEase: "linear",
+        appendDots: dots => <ul style={{ display: "block", marginBottom: this.state.ulHeight}} ref={(ulEl) => this.ulEl = ulEl}>{dots}</ul>,
+        customPaging: i => <button>{i + 1}</button>
     };
     return (<div>
       <Carousel {...settings}>
@@ -35,8 +47,10 @@ class Slide extends Component {
           <h3>6</h3>
         </div>
       </Carousel>
-    </div>)
-  }
+          <div style={{width:0, height:0, padding: 0, margin: `0 0 ${this.state.ulHeight} 0`}}/>
+    </div>
+    )
+  };
 }
 
 export default Slide;

src/scenes/home/index.js

@@ -1,12 +1,36 @@
 import React, { Component } from 'react';
 import Slide from "./components/carousel";
+import {withRouter} from "react-router-dom";
+import {getLanguageText} from "../../texts";
 
 class Home extends Component {
+
     render(){
+        const {lang} = this.props;
         return (<div>
           <Slide/>
+            <div style={Home.CENTRAL_DIV_STYLE}>
+                <div style={Home.CONTENT_DIV_STYLE}>
+                    {getLanguageText("EXAMPLE", lang)}
+                </div>
+            </div>
+            <div>
+
+            </div>
         </div>)
     }
+
+    static CENTRAL_DIV_STYLE = {
+        marginTop: "10px",
+        display: "flex",
+        flexWrap: "noWrap",
+        justifyContent: "space-around"
+    };
+
+    static CONTENT_DIV_STYLE = {
+        maxWidth: "1048px"
+    };
 }
 
-export default Home;
+
+export default withRouter(Home);

src/texts.js

@@ -0,0 +1,37 @@
+export const TEXTS = {
+    EXAMPLE: {
+        en: "TESTING",
+        pt: "TESTANDO"
+    },
+    ABOUT_US: {
+        en: "About us",
+        pt: "Sobre nós"
+    },
+    TEAMS: {
+        en: "Teams",
+        pt: "Equipes"
+    },
+    CONTACT: {
+        en: "Contact",
+        pt: "Contato"
+    },
+    LANGUAGE: {
+        en: "Language",
+        pt: "Idioma"
+    }
+};
+
+/**
+ * Arrow function para pegar o texto do componente pelo ID
+ *
+ * @param textId
+ * @param language
+ */
+
+export const getLanguageText = (textId, language = DEFAULT_LANGUAGE) => {
+    return TEXTS[textId][
+        TEXTS[textId].hasOwnProperty(language) ? language : DEFAULT_LANGUAGE
+        ];
+};
+
+export const DEFAULT_LANGUAGE = "en";

src/utils/getQueryObject.js

@@ -0,0 +1,15 @@
+/**
+ * Função que retorna um objeto contendo os elementos da searchString após a primeira hash
+ *
+ * @param queryString
+ * @returns object of Strings
+ */
+export const getQueryObject = queryString => {
+    return (
+        !!queryString ? queryString.substring(1).split("&").reduce((prev, curr) => {
+        const [key, value] = curr.split("=");
+        prev[key] = value;
+        return prev;
+    }, {}) : {}
+    ) || {};
+};

src/utils/getSceneLanguage.js

@@ -0,0 +1,15 @@
+import {DEFAULT_LANGUAGE} from "../texts";
+import {getQueryObject} from "./getQueryObject";
+import React from "react";
+
+/**
+ *
+ * Função que recebe os props do Route, e retorna a propriedade lang
+ *
+ * @param props
+ * @returns {string}
+ */
+export const getSceneLanguage = (props) => {
+    const {lang = DEFAULT_LANGUAGE} = getQueryObject(props.location.search);
+    return lang
+};