Real App.js Example

example.js

import React, { Component } from 'react'
import Header from '~/components/header'
import Footer from '~/components/footer'

import Login from './login'
import Portfolio from '~/components/portfolio'

import { Switch, Route, Redirect } from 'react-router-dom'
import { ROOT_APP_URL } from '~/constants'


export default class App extends Component {
  render() {
    return (
      <div className="app">
        <Header component={Header} />

        <Switch>
          <Route path="/login" exact component={Login} />
          <Route path={ROOT_APP_URL} component={Portfolio} />
          <Redirect to={ROOT_APP_URL} />
        </Switch>

        <Footer component={Footer} />
      </div>
    )
  }
}

/**
* Pretend this is in a separate file
*/
import React, { Component } from 'react'
import ThumbnailGallery from '~/components/ThumbnailGallery'

export default class Portfolio extends Component {
  render() {
    return (
      <div>
        <h1>Hi, Check out my portfolio</h1>
      
        <h2>Recent Clients</h2>
        <a href="/someurl">Client One</a>
        <a href="/someurl">Client Two</a>
        <a href="/someurl">Client Three</a>
      
        <h2>View My Photo Gallery</h2>
        <ThumbnailGallery />
      </div>
    )
  }
}
  

Imagine that maybe you could instead wrap thumbnail gallery in some type of modal. So it doesn't take you off the page, it just pops up over the current content.