Q:

Wrapping 's in  using react-router

I have 3 buttons that link to different pages. The main page is the only page that is supposed to display the buttons (App.js). I've created two more pages, table1.js, table2.js, table3.js that all display different things. My problem is, when I click either one of the buttons, it directs me to the right page (e.g. http://localhost:3000/table1) but the buttons are still being displayed. Is there a way I can do something like "remove buttons after user is directed to new page"? 
class App extends Component {

render() {
    return (
      <div className="App">   
        <form className='button-container'>
        <Router>
          <div> 
          <Route exact path='/table1' component={table1}/>
          <Link to="/table1" className='button'>
            <button className='button' type="button">
                  Table 1        
            </button>
          </Link>
          </div>
          <div>
          <Route exact path='/table2' component={table2}/>
          <Link to="/table2" className='button'>
            <button className='button' type="button">
                  Table 2        
            </button>
          </Link>
          </div>
          <div>
          <Route exact path='/table3' component={table3}/>
          <Link to="/table3" className='button'>
            <button className='button' type="button">
                  Table 3        
            </button>
          </Link>
          </div>
        </Router>
        </form>
      </div>
    );
  }
}
export default App;

A:

You should probably separate you're routing buttons into a different component and only render the buttons based on a route or condition as well:
class Navigation extends Component {
  render() {
    return (
      <form className="button-container">
        <Link to="/table1" className="button">
          <button className="button" type="button">
            Table 1
          </button>
        </Link>
        <Link to="/table2" className="button">
          <button className="button" type="button">
            Table 2
          </button>
        </Link>
        <Link to="/table3" className="button">
          <button className="button" type="button">
            Table 3
          </button>
        </Link>
      </form>
    );
  }
}

class App extends Component {
  render() {
    return (
      <div className="App">
        <Router>
          <Switch> {/* only matches one route */}
            <Route exact path="/table1" component={table1} />
            <Route exact path="/table2" component={table2} />
            <Route exact path="/table3" component={table3} />
            <Route component={Navigation} /> {/* If no routes matched show Navigation */}
          </Switch>
        </Router>
      </div>
    );
  }
}
export default App;

