implementing Router to change pages in React.js

Question

I am making a react.js shopping list app I have it so that you input the values and can print them out into a table. This is my first time using react and I want to have my table on a separate page I am aware of ROUTER method but am having trouble implementing it.

Here is my code note: I have not added any thing to navigate between pages yet but i want the print button to navigate to from App.js to 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.log("app- constructor");
  }

  componentDidMount() {
    console.log("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.log(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.log("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;

this is what my app looks like but I want the table to be on a Details page any help is appreciated

Answer 1

Router is not a method but rather a component which wraps the application. Inside of Router , the Switch component wraps several instances of Route , which in turn wrap the components which are to be rendered when that route is hit. Finally the Link component is used to build links to various Route instances. All together it looks something like this:

import { 
    BrowserRouter as Router, 
    Switch, 
    Route,
    Link
} from "react-router-dom";

<Router>
    <Switch>

        <Route exact path="/">
            <div>

                ...insert home page here...

                <Link to="/details">Click here to go to details page!</Link>

            </div>
        </Route>

        <Route path="/details">
            ...details page/component here...
        </Route>

    </Switch>
</Router>

See the React Router Tutorial for more information.