Реализация Router для смены страниц в React.js

Я делаю приложение со списком покупок react.js. У меня есть оно, чтобы вы вводили значения и могли распечатать их в таблице. Я впервые использую реакцию, и я хочу, чтобы моя таблица была на отдельной странице. Я знаю о методе ROUTER, но у меня проблемы с его реализацией.

Вот мой код примечание: я еще не добавил ничего для навигации между страницами, но я хочу, чтобы кнопка печати переходила от App.js к Details.js

import NavBar from "./components/navbar";
import "./App.css";
import Counters from "./components/counters";
import Details from "./Details";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

class App extends Component {
  state = {
    counters: [
      //example of objects in array
      /*{ id: 1, value: 2, text: "hi" },*/
    ],
  };
  constructor(props) {
    super(props);
    console.info("app- constructor");
  }

  componentDidMount() {
    console.info("app- mouneted");
  }

  handleIncrement = (counter) => {
    const counters = [...this.state.counters];
    const index = counters.indexOf(counter);
    counters[index] = { ...counter };
    counters[index].value++;
    this.setState({ counters });
  };

  handleDecrement = (counter) => {
    const counters = [...this.state.counters];
    const index = counters.indexOf(counter);
    counters[index] = { ...counter };
    counters[index].value--;
    this.setState({ counters });
  };

  handleReset = () => {
    const counters = this.state.counters.map((c) => {
      c.value = 0;
      return c;
    });
    this.setState({ counters });
  };

  handleName = () => {
    var name = prompt("name");
    return name;
  };

  handleCreate = () => {
    const create = this.state.counters.length + 1;
    const counter = this.state.counters.push({
      id: create,
      value: 0,
      text: this.handleName(),
    });
    this.setState({ counter });
  };

  handleDelete = (counterId) => {
    const counters = this.state.counters.filter((c) => c.id !== counterId);
    this.setState({ counters });
  };

  handleInfo = () => {
    let x;
    //loops through all tems and adds the to the list
    for (x = 0; x <= this.state.counters.length; x++) {
      //breaks loop if x is == to counters array
      if (this.state.counters.length == x) {
        break;
      }
      const info = this.state.counters[x]["text"];
      const quantity = this.state.counters[x]["value"];
      console.info(info, quantity);

      //creates rows based on input
      var table = document.getElementById("myList");
      var row = table.insertRow(1);
      var itemCell = row.insertCell(0);
      var quantityCell = row.insertCell(1);
      itemCell.innerHTML = info;
      quantityCell.innerHTML = quantity;
    }
    //calls the print function
    return <a href = "http://localhost:3000/Details"></a>;
  };

  render() {
    console.info("rendered");
    return (
      <React.Fragment>
        <NavBar
          totalCounters = {this.state.counters.filter((c) => c.value > 0).length}
        />

        <main className = "container">
          <Counters
            counters = {this.state.counters}
            onReset = {this.handleReset}
            onCreate = {this.handleCreate}
            onIncrement = {this.handleIncrement}
            onDecrement = {this.handleDecrement}
            onDelete = {this.handleDelete}
            onInfo = {this.handleInfo}
          />
        </main>

        <div>
          <table bordered id = "myList">
            <tr>
              <th>Items</th>
              <th>Quantity</th>
            </tr>
          </table>
        </div>
        <style>
          {`
          th{
            border: 2px solid black;
            padding: 2px;
            min-width: 100px;
            font-size: 22px;
            font-style: bold;
          }
          
          td{
            border: 2px solid black;
            padding: 2px;
            min-width: 100px;
            font-size: 18px;
          }

        
          `}
        </style>
      </React.Fragment>
    );
  }
}

export default App;

вот как выглядит мое приложение но я хочу, чтобы таблица была на странице сведений любая помощь приветствуется