Завершение <button>в <Link to = ''> с использованием реактивного маршрутизатора

Question

У меня есть 3 кнопки, которые ссылаются на разные страницы.Главная страница - единственная страница, на которой должны отображаться кнопки (App.js).Я создал еще две страницы, table1.js, table2.js, table3.js, которые отображают разные вещи.Моя проблема в том, что, когда я нажимаю одну из кнопок, она направляет меня на нужную страницу (например, http://localhost:3000/table1), но кнопки все еще отображаются. Есть ли способ сделать что-то вроде "удалить кнопки после пользователя"направлен на новую страницу "?

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;

Answer 1

Вероятно, вам следует разделить кнопки маршрутизации на другой компонент и отображать кнопки только на основе маршрута или условия:

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;