Now, let's create some of the user interfaces. We'll start by creating our main container—app. So, inside app/index.js, you'll see the following code:

const AppWrapper = styled.div`
  max-width: calc(768px + 16px * 2);
  margin: 0 auto;
  display: flex;
  min-height: 100%;
  padding: 0 16px;
  flex-direction: column;
  .btn {
    line-height: 0;
  }
`;

// eslint-disable-next-line
class App extends Component {
  render() {
    return (
      <AppWrapper>
        <Header />
        <Switch>
          <Route exact path="/" component={HomePage} />
          <Route exact path="/login" component={LoginPage} />
          <Route exact path="/register" component={RegisterPage} />
          <Route exact path="/about" component={AboutPage} />
          <Route exact path="/contact" component={ContactPage} />
          <Route path="" component={NotFoundPage} />
        </Switch>
        <Footer />
       </AppWrapper>
    );
  }
}

export default withRouter(App);

The code inside the containers/App/index.js file should be no surprise to you. We've studied routing and its usage in Chapter 3, Routing. This is the main routing file that ensures the user gets into the correct route and page. We have used the withRouter function from react-router-dom. This function (https://reacttraining.com/react-router/web/api/withRouter) helps to get access to the history object properties.